@elmethis/core 1.0.0-alpha.159 → 1.0.0-alpha.160

package/dist/components/form/ElmButton2.css

@@ -0,0 +1,65 @@
+._button_16put_1 {
+  all: unset;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  padding: 0.5rem 1.5rem;
+  line-height: 1.5rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  transition: opacity 200ms, transform 200ms;
+  opacity: var(--opacity);
+}
+._normal_16put_16 {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);
+  color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._normal_16put_16 {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.6);
+  color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+._primary_16put_27 {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.2);
+  color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._primary_16put_27 {
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.6);
+  color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+._enable_16put_38 {
+  transition: opacity 200ms, transform 200ms;
+}
+[data-theme=dark] ._enable_16put_38:hover {
+  transform: translateX(-1px) translateY(-1px);
+  opacity: 0.7;
+  opacity: var(--opacity, 0.7);
+}
+[data-theme=dark] ._enable_16put_38:active {
+  transform: translateX(1px) translateY(1px);
+  opacity: 0.5;
+  opacity: var(--opacity, 0.5);
+}
+._enable_16put_38:hover {
+  transform: translateX(-1px) translateY(-1px);
+  opacity: 0.7;
+  opacity: var(--opacity, 0.7);
+}
+._enable_16put_38:active {
+  transform: translateX(1px) translateY(1px);
+  opacity: 0.5;
+  opacity: var(--opacity, 0.5);
+}
+._flex_16put_58 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}

package/dist/components/form/ElmCheckbox.css

@@ -0,0 +1,67 @@
+._container_101ok_1 {
+  width: -moz-fit-content;
+  width: fit-content;
+  font-family: sans-serif;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: pointer;
+  transition: opacity 200ms;
+}
+._container_101ok_1:hover {
+  opacity: 0.8;
+}
+._container--disable_101ok_11 {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+._container--disable_101ok_11:hover {
+  opacity: 0.45;
+}
+._checkbox_101ok_19 {
+  stroke: rgba(0, 0, 0, 0.8);
+  fill: transparent;
+}
+[data-theme=dark] ._checkbox_101ok_19 {
+  stroke: rgba(255, 255, 255, 0.8);
+}
+._rect_101ok_27 {
+  transition: all 0.2s;
+}
+._rect--loading_101ok_30 {
+  opacity: 0.3;
+}
+._rect--checked_101ok_33 {
+  fill: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._rect--checked_101ok_33 {
+  fill: rgba(255, 255, 255, 0.8);
+}
+._loading_101ok_40 {
+  transition: opacity 200ms;
+  fill: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._loading_101ok_40 {
+  fill: rgba(255, 255, 255, 0.7);
+}
+@keyframes _elmethis-checkbox-check-line_101ok_1 {
+0% {
+    stroke-dashoffset: 100%;
+}
+100% {
+    stroke-dashoffset: 0%;
+}
+}
+._check-line_101ok_56 {
+  stroke-dasharray: 100%;
+  animation-name: _elmethis-checkbox-check-line_101ok_1;
+  animation-duration: 0.2s;
+  animation-timing-function: ease-in-out;
+  animation-delay: 0.1s;
+  animation-fill-mode: both;
+  transform-origin: center;
+  stroke: rgba(255, 255, 255, 0.9);
+}
+[data-theme=dark] ._check-line_101ok_56 {
+  stroke: rgba(0, 0, 0, 0.9);
+}

package/dist/components/form/ElmSwitch.css

@@ -0,0 +1,42 @@
+._switch_y5v18_1 {
+  display: none;
+}
+._bar_y5v18_5 {
+  z-index: 0;
+  padding: var(--padding);
+  width: var(--width);
+  height: var(--size);
+  border-radius: calc((var(--size) + var(--padding)) / 2);
+  position: relative;
+  cursor: pointer;
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
+  transition: opacity 300ms, background-color 300ms;
+  background-color: rgba(128, 128, 128, 0.25);
+}
+._bar--checked_y5v18_17 {
+  background-color: var(--color);
+}
+._bar--disabled_y5v18_20 {
+  cursor: not-allowed;
+}
+._circle_y5v18_24 {
+  z-index: 1;
+  width: var(--size);
+  height: var(--size);
+  border-radius: 50%;
+  position: absolute;
+  top: var(--padding);
+  left: var(--padding);
+  transition: transform 300ms, opacity 300ms, background-color 300ms;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+._circle--checked_y5v18_35 {
+  transform: translateX(calc(var(--width) - var(--size)));
+}
+._circle--disabled_y5v18_38 {
+  opacity: 0.5;
+  background-color: gray;
+}
+._circle_y5v18_24:hover {
+  opacity: 0.8;
+}

package/dist/components/form/ElmTextField.css

@@ -0,0 +1,163 @@
+@keyframes _loading_bthl1_19 {
+0% {
+    transform-origin: 0%;
+    transform: scaleX(0);
+}
+40% {
+    transform-origin: 0%;
+    transform: scaleX(1);
+}
+60% {
+    transform-origin: 100%;
+    transform: scaleX(1);
+}
+100% {
+    transform-origin: 100%;
+    transform: scaleX(0);
+}
+}
+._loading_bthl1_19 {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #6987b8;
+  transition: opacity 200ms;
+  pointer-events: none;
+  animation-name: _loading_bthl1_19;
+  animation-iteration-count: infinite;
+  animation-duration: 1600ms;
+}
+._wrapper_bthl1_33 {
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: border-color 200ms, background-color 200ms;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--border-color);
+  background-color: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.15);
+}
+[data-theme=dark] ._wrapper_bthl1_33 {
+  background-color: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.75);
+}
+._header_bthl1_55 {
+  box-sizing: border-box;
+  height: 0.75rem;
+  padding: 0 0.25rem;
+  display: flex;
+  justify-content: space-between;
+}
+._label_bthl1_63 {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  font-size: 0.75rem;
+  line-height: 0.75rem;
+  height: 0.75rem;
+  vertical-align: top;
+  transition: color 200ms;
+  color: rgba(0, 0, 0, 0.65);
+  color: var(--color, rgba(0, 0, 0, 0.65));
+}
+[data-theme=dark] ._label_bthl1_63 {
+  color: rgba(255, 255, 255, 0.65);
+  color: var(--color, rgba(255, 255, 255, 0.65));
+}
+._requierd_bthl1_78 {
+  padding-inline: 0.25rem;
+  color: #c56565;
+  font-weight: bold;
+}
+._body_bthl1_84 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 0.5rem;
+}
+._left-icon_bthl1_91 {
+  margin: auto 0.25rem;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.7;
+}
+[data-theme=dark] ._left-icon_bthl1_91 {
+  filter: invert(1);
+}
+._input_bthl1_104 {
+  all: unset;
+  box-sizing: border-box;
+  padding: 0.5rem;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.7);
+  caret-color: rgba(0, 0, 0, 0.7);
+}
+._input_bthl1_104::-moz-placeholder {
+  opacity: 0.5;
+}
+._input_bthl1_104::placeholder {
+  opacity: 0.5;
+}
+[data-theme=dark] ._input_bthl1_104::-moz-placeholder {
+  opacity: 0.7;
+}
+[data-theme=dark] ._input_bthl1_104::placeholder {
+  opacity: 0.7;
+}
+._input_bthl1_104::-moz-selection {
+  background-color: rgba(0, 0, 0, 0.7);
+  color: rgba(255, 255, 255, 0.7);
+}
+._input_bthl1_104::selection {
+  background-color: rgba(0, 0, 0, 0.7);
+  color: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] ._input_bthl1_104 {
+  color: rgba(255, 255, 255, 0.7);
+  caret-color: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] ._input_bthl1_104::-moz-selection {
+  background-color: rgba(255, 255, 255, 0.7);
+  color: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._input_bthl1_104::selection {
+  background-color: rgba(255, 255, 255, 0.7);
+  color: rgba(0, 0, 0, 0.7);
+}
+._icon-box_bthl1_131 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+._icon_bthl1_131 {
+  box-sizing: border-box;
+  border-radius: 50%;
+  padding: 0.25rem;
+  width: 28px;
+  height: 28px;
+  transition: background-color 200ms;
+  color: gray;
+  cursor: pointer;
+}
+._icon_bthl1_131:hover {
+  background-color: rgba(128, 128, 128, 0.2);
+}
+._suffix_bthl1_151 {
+  opacity: 0.6;
+  padding: 0 0.5rem;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}

package/dist/components/form/ElmTotp.css

@@ -0,0 +1,60 @@
+._dummy-input_gewi2_1 {
+  all: unset;
+  height: 0px;
+}
+._container_gewi2_6 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+._char-box_gewi2_13 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 3.5rem;
+  height: 4rem;
+  border: solid 1px #ccc;
+  border-radius: 0.25rem;
+  transition: border-color 100ms, background-color 100ms, opacity 100ms;
+  background-color: rgba(0, 0, 0, 0.025);
+}
+[data-theme=dark] ._char-box_gewi2_13 {
+  background-color: rgba(255, 255, 255, 0.025);
+}
+._focused_gewi2_28 {
+  border-color: #6987b8;
+  background-color: rgba(105, 135, 184, 0.05);
+}
+._loading_gewi2_33 {
+  opacity: 0.5;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+[data-theme=dark] ._loading_gewi2_33 {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+._char_gewi2_13 {
+  font-size: 1.75rem;
+  font-family: monospace;
+  color: rgba(0, 0, 0, 0.7);
+}
+[data-theme=dark] ._char_gewi2_13 {
+  color: rgba(255, 255, 255, 0.7);
+}
+._icon_gewi2_50 {
+  width: 24px;
+  height: 24px;
+  padding: 0.5rem;
+  border-radius: 50%;
+  transition: background-color 200ms;
+  color: rgba(0, 0, 0, 0.7);
+}
+._icon_gewi2_50:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+[data-theme=dark] ._icon_gewi2_50 {
+  color: rgba(255, 255, 255, 0.7);
+}
+[data-theme=dark] ._icon_gewi2_50:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}

package/dist/components/headings/ElmFragmentIdentifier.css

@@ -0,0 +1,20 @@
+._fragment_fa0ru_1 {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+._icon_fa0ru_7 {
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  width: 20px;
+  height: 20px;
+  color: #6987b8;
+  transition: background-color 200ms;
+  cursor: pointer;
+}
+._icon_fa0ru_7:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+[data-theme=dark] ._icon_fa0ru_7:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}

package/dist/components/headings/ElmHeading1.css

@@ -0,0 +1,56 @@
+._h1_7nvyi_1 {
+  position: relative;
+  font-size: var(--font-size);
+  line-height: var(cacl(--font-size0.25rem));
+  opacity: var(--opacity);
+  transition: color 400ms, opacity 800ms;
+  color: rgba(0, 0, 0, 0.8);
+}
+._h1_7nvyi_1::-moz-selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+._h1_7nvyi_1::selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._h1_7nvyi_1 {
+  color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h1_7nvyi_1::-moz-selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h1_7nvyi_1::selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+._h1_7nvyi_1::after {
+  position: absolute;
+  content: "";
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  height: 0.25px;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: transform 800ms;
+  transform: scaleX(var(--scale));
+}
+[data-theme=dark] ._h1_7nvyi_1::after {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+._h1_7nvyi_1::before {
+  position: absolute;
+  content: "";
+  bottom: -4px;
+  left: 45%;
+  width: 10%;
+  height: 2px;
+  background-color: rgba(0, 0, 0, 0.6);
+  transition: transform 800ms;
+  transform: scaleY(var(--scale));
+  transform-origin: top;
+}
+[data-theme=dark] ._h1_7nvyi_1::before {
+  background-color: rgba(255, 255, 255, 0.6);
+}

package/dist/components/headings/ElmHeading2.css

@@ -0,0 +1,72 @@
+._h2_cxjup_1 {
+  margin-block: 1rem;
+  position: relative;
+  font-size: var(--font-size);
+  line-height: var(--font-size);
+  opacity: var(--opacity);
+  transition: color 400ms, opacity 800ms;
+  color: rgba(0, 0, 0, 0.8);
+}
+._h2_cxjup_1::-moz-selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+._h2_cxjup_1::selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._h2_cxjup_1 {
+  color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h2_cxjup_1::-moz-selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h2_cxjup_1::selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+._h2_cxjup_1::after {
+  position: absolute;
+  content: "";
+  right: 2px;
+  bottom: -4px;
+  width: 6px;
+  height: 8px;
+  opacity: 0.8;
+  transform: skewX(-25deg);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._h2_cxjup_1::after {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+._h2_cxjup_1::before {
+  position: absolute;
+  content: "";
+  right: 10px;
+  bottom: -4px;
+  width: 6px;
+  height: 8px;
+  opacity: 0.8;
+  transform: skewX(-25deg);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._h2_cxjup_1::before {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+._underline_cxjup_50 {
+  overflow: hidden;
+  position: absolute;
+  content: "";
+  bottom: -6px;
+  left: 0;
+  width: 100%;
+  height: 0.25px;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: transform 800ms;
+  transform: scaleX(var(--scale));
+  transform-origin: left;
+}
+[data-theme=dark] ._underline_cxjup_50 {
+  background-color: rgba(255, 255, 255, 0.5);
+}

package/dist/components/headings/ElmHeading3.css

@@ -0,0 +1,42 @@
+._h3_x0d8r_1 {
+  margin-block: 1rem;
+  position: relative;
+  box-sizing: border-box;
+  padding-left: 0.75rem;
+  font-size: var(--font-size);
+  line-height: var(--font-size);
+  opacity: var(--opacity);
+  transition: color 400ms, opacity 800ms;
+  color: rgba(0, 0, 0, 0.8);
+}
+._h3_x0d8r_1::-moz-selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+._h3_x0d8r_1::selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._h3_x0d8r_1 {
+  color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h3_x0d8r_1::-moz-selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h3_x0d8r_1::selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+._h3_x0d8r_1::after {
+  position: absolute;
+  content: "";
+  width: 3px;
+  height: 50%;
+  top: 25%;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._h3_x0d8r_1::after {
+  background-color: rgba(255, 255, 255, 0.8);
+}

package/dist/components/headings/ElmHeading4.css

@@ -0,0 +1,25 @@
+._h4_7klov_1 {
+  margin-block: 0.5rem;
+  font-size: var(--font-size);
+  transition: color 400ms;
+  color: rgba(0, 0, 0, 0.8);
+}
+._h4_7klov_1::-moz-selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+._h4_7klov_1::selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._h4_7klov_1 {
+  color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h4_7klov_1::-moz-selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h4_7klov_1::selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}

package/dist/components/headings/ElmHeading5.css

@@ -0,0 +1,25 @@
+._h5_1av6v_1 {
+  margin-block: 0.5rem;
+  font-size: var(--font-size);
+  transition: color 400ms;
+  color: rgba(0, 0, 0, 0.8);
+}
+._h5_1av6v_1::-moz-selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+._h5_1av6v_1::selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._h5_1av6v_1 {
+  color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h5_1av6v_1::-moz-selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h5_1av6v_1::selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}

package/dist/components/headings/ElmHeading6.css

@@ -0,0 +1,25 @@
+._h6_15uaq_1 {
+  margin-block: 0.5rem;
+  font-size: var(--font-size);
+  transition: color 400ms;
+  color: rgba(0, 0, 0, 0.8);
+}
+._h6_15uaq_1::-moz-selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+._h6_15uaq_1::selection {
+  color: rgba(255, 255, 255, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
+}
+[data-theme=dark] ._h6_15uaq_1 {
+  color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h6_15uaq_1::-moz-selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}
+[data-theme=dark] ._h6_15uaq_1::selection {
+  color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(255, 255, 255, 0.8);
+}

package/dist/components/icon/ElmArrowIcon.css

@@ -0,0 +1,44 @@
+@keyframes _loading_hcczr_27 {
+0% {
+    background-position: 200% 0%;
+}
+33% {
+    background-position: 100% 0%;
+}
+66% {
+    background-position: 100% 0%;
+}
+100% {
+    background-position: 0% 0%;
+}
+}
+._arrow_hcczr_15 {
+  width: var(--size);
+  height: var(--size);
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0 50%, rgba(0, 0, 0, 0.2) 50%);
+  background-size: 200% 100%;
+  clip-path: polygon(50% 33%, 0% 33%, 0% 66%, 50% 66%, 50% 100%, 100% 50%, 50% 0%);
+}
+[data-theme=dark] ._arrow_hcczr_15 {
+  background: linear-gradient(to right, rgba(255, 255, 255, 0.7) 0 50%, rgba(255, 255, 255, 0.2) 50%);
+  background-size: 200% 100%;
+}
+._loading_hcczr_27 {
+  animation-name: _loading_hcczr_27;
+  animation-duration: 1600ms;
+  animation-iteration-count: infinite;
+}
+._normal_hcczr_33 {
+  background: rgba(0, 0, 0, 0.7);
+  transition: background 400ms;
+}
+[data-theme=dark] ._normal_hcczr_33 {
+  background: rgba(255, 255, 255, 0.7);
+}
+._pending_hcczr_41 {
+  background: rgba(0, 0, 0, 0.2);
+  transition: background 400ms;
+}
+[data-theme=dark] ._pending_hcczr_41 {
+  background: rgba(255, 255, 255, 0.2);
+}