@geoinsight/react-components 1.1.3 → 1.1.5

package/dist/esm/index.css

@@ -0,0 +1,1138 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
+
+:root {
+  box-sizing: border-box;
+  font-family: Poppins;
+  font-size: var(--font-size-16);
+
+  --font-size-10: 10px;
+  --font-size-12: 12px;
+  --font-size-14: 14px;
+  --font-size-16: 16px;
+  --font-size-18: 18px;
+  --font-size-20: 20px;
+  --font-size-24: 24px;
+  --font-size-32: 32px;
+  --font-size-40: 40px;
+
+  --spacing-4: 0.25rem;
+  --spacing-8: 0.5rem;
+  --spacing-12: 0.75rem;
+  --spacing-16: 1rem;
+  --spacing-20: 1.25rem;
+  --spacing-24: 1.5rem;
+  --spacing-32: 2rem;
+  --spacing-40: 2.5rem;
+  --spacing-48: 3rem;
+  --spacing-64: 4rem;
+  --spacing-96: 6rem;
+  --spacing-128: 8rem;
+
+  --size-m: 12rem;
+
+  --color-black: #1d1d1d;
+  --color-white: #eee;
+
+  --color-neutral-200: #dedede;
+  --color-neutral-300: #c3c3c3;
+  --color-neutral-400: #afafaf;
+  --color-neutral-500: #818181;
+  --color-neutral-600: #6c6c6c;
+  --color-neutral-700: #403b3a;
+  --color-neutral-800: #201e1d;
+
+  /* --color-success: #20e52f;
+  --color-danger: #e52f20; */
+
+  --transition-bg-cubic-bezier: background-color 500ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-color-cubic-bezier: color 500ms cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-text-decoration-cubic-bezier: text-decoration 500ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-text-underline-offset-cubic-bezier: text-underline-offset 250ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-box-shadow-cubic-bezier: box-shadow 500ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+  --transition-border-cubic-bezier: border 250ms
+    cubic-bezier(0.1, 0.2, 0.3, 0.4);
+
+
+  --color-dark-base: #2e3440;
+  --color-dark-bright: #3b4252;
+  --color-dark-brighter: #434c5e;
+  --color-dark-brightest: #4c566a;
+
+  --color-light-base: #d8dee9;
+  --color-light-bright: #e5e9f0;
+  --color-light-brighter: #eceff4;
+
+  --color-primary-base: #8fbcbb;
+  --color-primary-bright: #88c0d0;
+  --color-primary-dark: #81a1c1;
+  --color-primary-darker: #5e81ac;
+
+  --color-danger: #bf616a;
+  --color-warning: #ebcb8b;
+  --color-success: #a3be8c;
+  --color-info: #b48ead;
+}
+
+[data-theme="dark"] {
+  --color-main-background: var(--color-dark-base);
+  --color-main-color: var(--color-light-base);
+  color: var(--color-main-color) !important;
+  background-color: var(--color-main-background) !important;
+}
+
+[data-theme="light"] {
+  --color-main-background: var(--color-light-base);
+  --color-main-color: var(--color-dark-base);
+  color: var(--color-main-color) !important;
+  background-color: var(--color-main-background) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+  body {
+    color: var(--color-main-color);
+    background-color: var(--color-main-background);
+  }
+}
+
+[data-palette="water"] {
+  --color-primary-100: #d6efff;
+  --color-primary-200: #ade0ff;
+  --color-primary-300: #85d0ff;
+  --color-primary-400: #5cc0ff;
+  --color-primary-500: #33b1ff;
+  --color-primary-600: #009eff;
+  --color-primary-700: #008ae0;
+  --color-primary-800: #0071b8;
+  --color-primary-900: #00588f;
+}
+
+[data-palette="earth"] {
+  --color-primary-100: #f6e3cb;
+  --color-primary-200: #edc897;
+  --color-primary-300: #eabe86;
+  --color-primary-400: #e3ac63;
+  --color-primary-500: #dd9940;
+  --color-primary-600: #ca8323;
+  --color-primary-700: #ad701f;
+  --color-primary-800: #8b5918;
+  --color-primary-900: #684312;
+}
+
+[data-palette="forest"] {
+  --color-primary-100: #bee8b0;
+  --color-primary-200: #a4df90;
+  --color-primary-300: #8ad671;
+  --color-primary-400: #70cd51;
+  --color-primary-500: #54b435;
+  --color-primary-600: #4a9e2e;
+  --color-primary-700: #3b7e25;
+  --color-primary-800: #2c5f1c;
+  --color-primary-900: #1e3f12;
+}
+
+h1 {
+  font-size: var(--font-size-40);
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+h2 {
+  font-size: var(--font-size-32);
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+h3 {
+  font-size: var(--font-size-24);
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+h4 {
+  font-size: var(--font-size-20);
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+h5 {
+  font-size: var(--font-size-18);
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+h6 {
+  font-size: var(--font-size-16);
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+@media (max-width: 1385px) {
+  h1 {
+    font-size: var(--font-size-32);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h2 {
+    font-size: var(--font-size-24);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h3 {
+    font-size: var(--font-size-20);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h4 {
+    font-size: var(--font-size-18);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h5 {
+    font-size: var(--font-size-16);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h6 {
+    font-size: var(--font-size-14);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+  * {
+    font-size: var(--font-size-14);
+  }
+}
+
+@media (max-width: 600px) {
+  h1 {
+    font-size: var(--font-size-24);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h2 {
+    font-size: var(--font-size-20);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h3 {
+    font-size: var(--font-size-18);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h4 {
+    font-size: var(--font-size-16);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h5 {
+    font-size: var(--font-size-14);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  h6 {
+    font-size: var(--font-size-12);
+    font-weight: 700;
+    line-height: 1.25;
+  }
+  * {
+    font-size: var(--font-size-12);
+  }
+}
+
+.menu-button {
+  align-items: center;
+  background-color: var(--color-dark-bright);
+  border-radius: var(--spacing-8) var(--spacing-12) var(--spacing-12)
+    var(--spacing-8);
+  border: none;
+  color: var(--color-light-bright);
+  cursor: pointer;
+  display: flex;
+  gap: var(--spacing-8);
+  height: var(--spacing-40);
+  justify-content: flex-end;
+  padding: var(--spacing-4) var(--spacing-16);
+  margin: var(--spacing-4) 0;
+  text-decoration: none;
+}
+
+/* .menu-button > svg {
+  margin-bottom: 5px;
+} */
+
+.menu-button:disabled {
+  cursor: unset;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.menu-button:hover {
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-bg-cubic-bezier),
+    var(--transition-box-shadow-cubic-bezier);
+}
+
+.menu-button-dropdown {
+  background-color: var(--color-dark-bright) !important;
+  padding-right: var(--spacing-16) !important;
+}
+
+.menu-button-nested {
+  background-color: var(--color-dark-brightest);
+  margin-left: var(--spacing-16);
+  padding-right: var(--spacing-40);
+}
+
+.menu-button-subnested {
+  background-color: var(--color-dark-brightest);
+  margin-left: var(--spacing-32);
+  padding-right: var(--spacing-40);
+}
+
+.menu-button-nested:hover {
+  background-color: var(--color-primary-dark) !important;
+}
+
+.menu-button-subnested:hover {
+  background-color: var(--color-primary-dark) !important;
+}
+
+.menu-button-is-link:hover {
+  background-color: var(--color-primary-dark) !important;
+  transition: var(--transition-bg-cubic-bezier);
+}
+
+.menu-button-dropdown:hover {
+  background-color: var(--color-primary-darker) !important;
+}
+
+.menu-button-is-selected {
+  background-color: var(--color-primary-darker);
+}
+
+.button,
+.link {
+  align-items: center;
+  border-radius: var(--spacing-32);
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-8);
+  font-size: var(--font-size-16);
+}
+
+[data-theme="dark"] .button {
+  color: var(--color-light-brighter);
+}
+
+.button:disabled {
+  cursor: unset;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.button:hover {
+  background-color: var(--color-primary-dark);
+  border: 3px solid var(--color-primary-dark);
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-bg-cubic-bezier),
+    var(--transition-box-shadow-cubic-bezier);
+}
+
+
+.button__primary {
+  background-color: var(--color-primary-bright);
+  border: 3px solid var(--color-primary-base);
+}
+
+.button__secondary,
+.link__secondary {
+  background-color: var(--color-main-background);
+  border: 3px solid var(--color-primary-base);
+  border-radius: var(--spacing-32);
+  text-decoration: unset;
+}
+
+.button__secondary:hover {
+  box-shadow: unset;
+  border: 3px solid var(--color-primary-base);
+}
+
+.button__icon {
+  background-color: var(--color-primary-bright);
+}
+
+.button__icon:hover {
+  border: unset;
+}
+
+.link__primary {
+  background-color: unset !important;
+  color: var(--color-primary-base) !important;
+  text-decoration: underline 1px var(--color-primary-base);
+  text-underline-offset: var(--spacing-4);
+}
+
+[data-theme="light"] .link__primary {
+  color: var(--color-primary-darker) !important;
+  text-decoration: underline 1px var(--color-primary-darker);
+}
+
+.link__primary:hover {
+  border: unset;
+  box-shadow: unset;
+  color: var(--color-primary-dark) !important;
+  text-decoration: underline 2px var(--color-primary-base);
+  text-underline-offset: calc(var(--spacing-8) * 0.75);
+  transition: var(--transition-color-cubic-bezier),
+    var(--transition-text-underline-offset-cubic-bezier);
+}
+
+.link__secondary:hover {
+  background-color: var(--color-primary-dark);
+  border: 3px solid var(--color-primary-base);
+  box-shadow: unset;
+  transition: var(--transition-bg-cubic-bezier),
+    var(--transition-box-shadow-cubic-bezier);
+}
+
+.link__icon {
+  background-color: unset !important;
+  color: var(--color-primary-base) !important;
+}
+
+.link > a {
+  text-decoration: inherit;
+  color: inherit;
+}
+
+.link__icon svg {
+  border: 2px solid transparent;
+  border-bottom: 2px solid var(--color-primary-base);
+  border-radius: 2px;
+  padding: var(--spacing-4);
+}
+
+[data-theme="light"] .link__icon {
+  color: var(--color-primary-darker) !important;
+}
+
+[data-theme="light"] .link__icon svg {
+  border-bottom: 2px solid var(--color-primary-darker);
+}
+
+.link__icon:hover {
+  border: unset;
+  box-shadow: unset;
+}
+
+.link__icon:hover svg {
+  color: var(--color-main-color) !important;
+  border: 2px solid var(--color-primary-dark);
+  transition: var(--transition-color-cubic-bezier), var(--transition-border-cubic-bezier);
+}
+
+.button__small {
+  padding: var(--spacing-4);
+}
+
+.button__medium {
+  padding: var(--spacing-8) var(--spacing-24);
+}
+
+.button__large {
+  padding: var(--spacing-16);
+}
+
+.button__icon.button__medium {
+  padding: var(--spacing-8) var(--spacing-12);
+}
+
+.form {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-32);
+  padding: var(--spacing-32) 0;
+}
+
+.form__message {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-16);
+}
+.input-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+}
+
+.input-subgroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+}
+
+.input {
+  box-sizing: border-box;
+  border-radius: var(--spacing-8);
+  border: 2px solid var(--color-primary-bright);
+  padding: var(--spacing-16) var(--spacing-24);
+  font-size: var(--font-size-16);
+  width: 100%;
+}
+
+[data-theme="dark"] .input {
+  background-color: var(--color-dark-bright);
+  color: var(--color-light-bright);
+}
+
+[data-theme="light"] .input {
+  background-color: var(--color-light-bright);
+  color: var(--color-dark-bright);
+}
+
+.input__header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.input__header--error {
+  font-size: 12px;
+  color: var(--color-danger);
+}
+
+.input--icon {
+  padding: var(--spacing-16) var(--spacing-40);
+}
+
+.input__icon {
+  padding: var(--spacing-16) var(--spacing-16);
+  position: absolute;
+}
+
+.input__icon--right {
+  right: 0;
+}
+
+.input__icon--left {
+  left: 0;
+}
+
+.input:enabled:hover {
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-box-shadow-cubic-bezier);
+}
+
+.input:focus {
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-box-shadow-cubic-bezier);
+  outline: none;
+}
+
+.input:disabled {
+  opacity: 0.5;
+}
+
+.input--error {
+  border: 3px solid var(--color-danger) !important;
+}
+
+.input--error:focus {
+  border: 3px solid var(--color-danger);
+  outline: none;
+}
+
+.custom-class-name {
+  background-color: cyan;
+  width: 94.5%;
+  padding: var(--spacing-16) var(--spacing-24);
+  font-size: var(--font-size-16);
+  border-radius: var(--spacing-8);
+}
+
+.special-label-class {
+  color: violet;
+  text-decoration: overline;
+}
+
+.input[type="checkbox"] {
+  background: #fbfbfb;
+  border-radius: 2em;
+  padding: 2px;
+}
+.textarea {
+  margin-bottom: var(--spacing-8);
+  position: relative;
+  width: 100%;
+}
+
+.textarea__header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.textarea__header--error {
+  font-size: 12px;
+  color: var(--color-danger);
+}
+
+.textarea__input {
+  box-sizing: border-box;
+  border-radius: var(--spacing-8);
+  border: 2px solid var(--color-primary-bright);
+  cursor: text;
+  outline: none;
+  padding: var(--spacing-8) var(--spacing-16);
+  resize: vertical;
+  width: 100%;
+}
+
+[data-theme="dark"] .textarea__input {
+  background-color: var(--color-dark-bright);
+  color: var(--color-light-bright);
+}
+
+[data-theme="light"] .textarea__input {
+  background-color: var(--color-light-bright);
+  color: var(--color-dark-bright);
+}
+
+[data-theme="dark"] .textarea__input {
+  background-color: var(--color-dark-bright);
+  color: var(--color-light-bright);
+}
+
+[data-theme="light"] .textarea__input {
+  background-color: var(--color-light-bright);
+  color: var(--color-dark-bright);
+}
+
+.textarea__input--error {
+  border: 3px solid var(--color-danger);
+}
+
+.textarea__input:enabled:hover {
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-box-shadow-cubic-bezier);
+}
+
+.textarea__input:focus {
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-box-shadow-cubic-bezier);
+  outline: none;
+}
+
+.textarea__input:disabled {
+  opacity: 0.5;
+}
+
+.textarea__button.button {
+  border-radius: 0px 0px var(--spacing-8) var(--spacing-8);
+  bottom: 0;
+  cursor: pointer;
+  left: 0;
+  padding: var(--spacing-4) var(--spacing-8);
+  position: absolute;
+  width: 100%;
+}
+
+.textarea__button--error {
+  background: var(--color-danger) !important;
+  border: 3px solid var(--color-danger) !important;
+}
+
+.textarea__button > svg {
+  color: var(--color-main-color);
+}
+
+.textarea__button:disabled {
+  cursor: unset;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.textarea__button--show {
+  background-color: var(--color-primary-dark) !important;
+  border: 2px solid var(--color-primary-dark) !important;
+}
+
+.custom-label {
+  color: red;
+  text-decoration: line-through;
+}
+
+.textarea__button--show.textarea__button--error {
+  background: var(--color-danger) !important;
+  border: 3px solid var(--color-danger) !important;
+}
+
+.select-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  position: relative;
+  width: 100%;
+}
+
+.select {
+  box-sizing: border-box;
+  border-radius: var(--spacing-8);
+  border: 2px solid var(--color-primary-bright);
+  padding: var(--spacing-16) var(--spacing-24);
+  font-size: var(--font-size-16);
+  width: 100%;
+}
+
+.select--focus {
+  border-radius: var(--spacing-8) var(--spacing-8) 0 0 !important;
+}
+
+.select:focus {
+  border-radius: var(--spacing-8) var(--spacing-8) 0 0;
+}
+
+.select:disabled {
+  opacity: 0.5;
+}
+
+.select__arrow.input__icon {
+  padding: 0;
+}
+
+.select__arrow-button.button {
+  background-color: unset;
+  border-radius: 0 var(--spacing-8) var(--spacing-8) 0;
+  padding: 15px var(--spacing-24);
+}
+
+.select__arrow-button.button:hover {
+  background-color: var(--color-primary-dark);
+}
+
+.select__arrow-button--open.button {
+  border-bottom-right-radius: 0 !important;
+}
+
+.select__box {
+  background-color: var(--color-main-background);
+  border-radius: 0 0 var(--spacing-8) var(--spacing-8);
+  border: 2px solid var(--color-primary-bright);
+  box-sizing: border-box;
+  max-height: var(--size-m);
+  overflow: scroll;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: 2;
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+  scrollbar-width: none; /* Firefox */
+}
+
+.select__box::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}
+
+.select__option.button {
+  border: none;
+  border-radius: 0;
+  justify-content: start;
+  width: 100%;
+}
+
+.select__option.button:hover {
+  border: unset;
+}
+
+.select__option.button:last-child {
+  border-radius: 0 0 var(--spacing-8) var(--spacing-8);
+}
+
+.select--error {
+  border: 3px solid var(--color-danger);
+}
+
+.select--error:focus {
+  border: 3px solid var(--color-danger);
+  outline: none;
+}
+
+.custom-class-name-group {
+  background-color: blue;
+  padding: var(--spacing-8);
+}
+
+.loading {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  position: relative;
+}
+
+.loading-message {
+  color: white;
+}
+
+.modal-overlay {
+  background: rgba(0, 0, 0, 0.3);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.modal {
+  background: white;
+  border-radius: var(--spacing-8);
+  border: 1px solid var(--color-neutral-600);
+  color: var(--color-black);
+  left: 50%;
+  padding: var(--spacing-4) var(--spacing-4);
+  position: absolute;
+  right: var(--spacing-16);
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 5;
+}
+
+.modal__close {
+  position: absolute;
+  right: calc(var(--spacing-16) * -1);
+  top: calc(var(--spacing-16) * -1);
+  z-index: 5;
+}
+
+.modal__content {
+  border: 1px solid var(--color-neutral-100);
+  border-radius: var(--spacing-8);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding: 0 var(--spacing-16);
+}
+
+.modal__footer {
+  padding-bottom: var(--spacing-16);
+}
+
+.range {
+  align-items: center;
+  display: flex;
+  position: relative;
+  min-width: 20rem;
+  gap: var(--spacing-16);
+}
+
+.range__panel:hover {
+  border-radius: var(--spacing-8);
+  box-shadow: 2px 4px 6px 0 var(--color-primary-base);
+  transition: var(--transition-bg-cubic-bezier),
+    var(--transition-box-shadow-cubic-bezier);
+}
+
+.range__panel {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.range__track {
+  background-color: var(--color-primary-bright);
+  border-radius: 0 var(--spacing-4) var(--spacing-4) 0;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+}
+
+.range__content {
+  align-items: start;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  width: var(--spacing-40);
+  z-index: 3;
+}
+
+.range__content:hover {
+  box-shadow: 5px 2px 6px 0 var(--color-main-color);
+  transition: var(--transition-box-shadow-cubic-bezier);
+}
+
+.range__content__period {
+  gap: 0;
+  width: var(--spacing-8);
+}
+
+.range__tick {
+  border-left: 2px solid
+    color-mix(in srgb, var(--color-primary-dark) 80%, transparent 10%);
+  width: 100%;
+}
+
+.range__tick__large {
+  height: 1rem;
+}
+
+.range__tick__small {
+  height: 0.5rem;
+}
+
+.range__value {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: calc(80%);
+}
+
+.range__value__period {
+  border-left: 2px solid
+    color-mix(in srgb, var(--color-primary-dark) 80%, transparent 10%);
+  width: calc(100% + var(--spacing-40));
+}
+
+.range__value--over {
+  background-color: var(--color-main-background) !important;
+  overflow: visible;
+  white-space: unset;
+  width: unset;
+  position: absolute;
+  top: calc(var(--spacing-40) * 1);
+}
+
+.range__thumb {
+  position: absolute;
+  top: -32px;
+  background-color: transparent;
+}
+
+.button__icon.range__play {
+  background-color: var(--color-main-background);
+  border: 1px solid var(--color-primary-dark);
+  border-radius: var(--spacing-32);
+  z-index: 5;
+}
+
+.button__icon.range__play:hover {
+  border: 1px solid var(--color-primary-dark);
+}
+
+@media (max-width: 699px) {
+  .range {
+    flex-direction: column;
+  }
+  .range__panel {
+    min-width: none;
+    max-width: 30rem;
+  }
+}
+
+@media (max-width: 500px) {
+  .range__panel {
+    min-width: none;
+    max-width: 20rem;
+  }
+}
+@property --angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.checkbox__header {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.checkbox-subgroup {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+}
+
+.checkbox {
+  align-content: center;
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: var(--color-main-background);
+  border-radius: 1rem;
+  display: flex;
+  justify-content: start;
+  padding: 0.1rem;
+  transform-style: preserve-3d;
+  width: 4rem;
+}
+
+[data-theme="light"] .checkbox:checked {
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary-dark),
+    var(--color-main-background)
+  );
+}
+
+[data-theme="dark"] .checkbox:checked {
+  background-color: color-mix(
+    in srgb,
+    var(--color-primary-darker),
+    var(--color-main-color)
+  );
+}
+
+.checkbox::after {
+  animation: 1s spinout linear;
+  background-image: conic-gradient(
+    from var(--angle),
+    transparent 70%,
+    var(--conic-color-0),
+    var(--conic-color-1),
+    var(--conic-color-2)
+  );
+  background-color: color-mix(
+    in srgb,
+    transparent 20%,
+    var(--color-main-color)
+  );
+  border-radius: 1rem;
+  content: "";
+  height: 1.5rem;
+  left: 50%;
+  padding: 0.2rem;
+  position: absolute;
+  top: 50%;
+  transform: translateZ(-1px);
+  translate: -50% -50%;
+  width: 4rem;
+}
+
+.checkbox:checked::after {
+  animation: 2s spin linear, 2s perc linear;
+  animation-fill-mode: none, forwards;
+  background-color: color-mix(
+    in srgb,
+    transparent var(--perc),
+    var(--color-main-color)
+  );
+  background-image: conic-gradient(
+    from var(--angle),
+    transparent 70%,
+    var(--conic-color-0),
+    var(--conic-color-1),
+    var(--conic-color-2)
+  );
+}
+
+.checkbox::before {
+  content: "";
+  width: 2.25rem;
+  height: 1.5rem;
+  transform: translate(0, 0);
+  background-color: color-mix(
+    in srgb,
+    transparent 80%,
+    var(--color-primary-dark)
+  );
+  border-radius: 1rem;
+  transition: transform 0.2s ease-out, background-color 0.2s ease-out;
+}
+
+.checkbox:checked::before {
+  background-color: var(--color-primary-darker);
+  transform: translate(1.5rem, 0);
+  transition: transform 0.2s ease-in, background-color 0.2s ease-in;
+}
+
+.checkbox:hover::before {
+  background-color: var(--color-primary-darker);
+}
+
+.checkbox:disabled {
+  opacity: 0.5;
+}
+
+.checkbox--error::after {
+  background-color:  var(--color-danger);
+}
+
+@keyframes perc {
+  0% {
+    --perc: 20%;
+  }
+  50% {
+    --perc: 10%;
+  }
+  100% {
+    --perc: 0%;
+  }
+}
+
+@keyframes spin {
+  0% {
+    --angle: 0deg;
+    --conic-color-0: var(--color-light-base);
+    --conic-color-1: var(--color-light-bright);
+    --conic-color-2: var(--color-light-brighter);
+  }
+  99% {
+    --conic-color-0: var(--color-light-base);
+    --conic-color-1: var(--color-light-bright);
+    --conic-color-2: var(--color-light-brighter);
+  }
+  100% {
+    --angle: 360deg;
+    --conic-color-0: var(--color-main-color);
+    --conic-color-1: var(--color-main-color);
+    --conic-color-2: var(--color-main-color);
+  }
+}
+
+@keyframes spinout {
+  from {
+    --angle: 360deg;
+    --conic-color-0: var(--color-light-base);
+    --conic-color-1: var(--color-light-bright);
+    --conic-color-2: var(--color-light-brighter);
+  }
+
+  to {
+    --angle: 0deg;
+    --conic-color-0: var(--color-light-base);
+    --conic-color-1: var(--color-light-bright);
+    --conic-color-2: var(--color-light-brighter);
+  }
+}