polpo 0.1.13 → 0.1.16

package/dist/components.css

@@ -1,2173 +1,2 @@
-/* src/components/line/line.styles.css */
-.custom-line {
-  --color: attr(data-color, "currentColor");
-  --size: attr(data-size, 1px);
-  --spacing: attr(data-spacing, 1px);
-  --dashSize: attr(data-dash-size, 1px);
-  &.horizontal,
-  &.vertical {
-    background: var(--color);
-    display: inline-block;
-    border-radius: 100px;
-  }
-  &.horizontal {
-    width: 100%;
-    height: var(--size);
-    &.dotted {
-      background:
-        radial-gradient(
-          calc(var(--size) / 2) calc(var(--size) / 2),
-          var(--color) 100%,
-          transparent) 0 0 / calc(var(--spacing) + var(--size)) 100%;
-    }
-    &.dashed {
-      background:
-        repeating-linear-gradient(
-          90deg,
-          var(--color),
-          var(--color) var(--dashSize),
-          transparent var(--dashSize),
-          transparent calc(var(--spacing) + var(--dashSize)));
-    }
-  }
-  &.vertical {
-    height: 100%;
-    width: var(--size);
-    &.dotted {
-      background:
-        radial-gradient(
-          calc(var(--size) / 2) calc(var(--size) / 2),
-          var(--color) 100%,
-          transparent) 0 0 / 100% calc(var(--spacing) + var(--size));
-    }
-    &.dashed {
-      background:
-        repeating-linear-gradient(
-          0deg,
-          var(--color),
-          var(--color) var(--dashSize),
-          transparent var(--dashSize),
-          transparent calc(var(--spacing) + var(--dashSize)));
-    }
-  }
-}
-
-/* src/components/accordion/accordion.styles.css */
-.accordion {
-  display: grid;
-}
-.accordion-item {
-  display: grid;
-  position: relative;
-  .accordion-header {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: center;
-    gap: 20px;
-    cursor: pointer;
-    position: sticky;
-    top: 0;
-    padding: 20px 0;
-    &.has-start-content {
-      grid-template-columns: auto 1fr auto;
-    }
-  }
-  .accordion-header-content {
-    display: grid;
-  }
-  .accordion-toggle-icon {
-    transition: all 300ms ease;
-    &.isOpen {
-      transform: rotate(-90deg);
-    }
-  }
-  .accordion-body {
-    padding: 10px 0 20px;
-  }
-}
-
-/* src/components/cards/flip-card/flip-card.styles.css */
-.flip-card {
-  --cardZIndex: attr(data-zIndex);
-  --flipSpeed: attr(data-flipSpeed, 500ms);
-  --frontRotate: attr(data-frontRotate);
-  --backRotate: attr(data-backRotate);
-  perspective: 1000px;
-  z-index: var(--cardZIndex);
-  .flipper {
-    height: 100%;
-    position: relative;
-    width: 100%;
-    transform-style: preserve-3d;
-  }
-  .front,
-  .back {
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    transform-style: preserve-3d;
-    transition: var(--flipSpeed);
-    height: 100%;
-    left: 0;
-    top: 0;
-    width: 100%;
-  }
-  .front {
-    position: relative;
-    transform: var(--frontRotate);
-    z-index: 2;
-  }
-  .back {
-    position: absolute;
-    transform: var(--backRotate);
-  }
-  .is-flipped {
-    .front {
-      position: absolute;
-    }
-    .back {
-      position: relative;
-    }
-  }
-}
-
-/* src/components/cards/hover-card/hover-card.styles.css */
-.hover-card {
-  display: inline-block;
-  transition: all 300ms ease;
-  .card-hover-layer {
-    transition: all 100ms ease;
-    width: 100%;
-    height: 100%;
-    display: grid;
-  }
-}
-
-/* src/components/typography/typography.styles.css */
-.typography {
-  margin: 0;
-  padding: 0.5em 0 0.4em;
-  &.primary {
-    color: var(--primary-500);
-  }
-  &.secondary {
-    color: var(--secondary-500);
-  }
-  &.tertiary {
-    color: var(--tertiary-500);
-  }
-  &.active {
-    color: var(--active-500);
-  }
-  &.alert {
-    color: var(--alert-500);
-  }
-  &.warning {
-    color: var(--warning-500);
-  }
-  &.info {
-    color: var(--info-500);
-  }
-  &.recommended-width {
-    max-width: 70ch;
-  }
-  &.code-family {
-    font-family: monospace;
-  }
-  &.no-padding {
-    padding: 0;
-  }
-  &.nowrap {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  &.nowrap-max-lines {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-  }
-  &.nowrap-max-lines-2 {
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-  }
-  &.nowrap-max-lines-3 {
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-  }
-  &.nowrap-max-lines-4 {
-    -webkit-line-clamp: 4;
-    line-clamp: 4;
-  }
-  &.nowrap-max-lines-5 {
-    -webkit-line-clamp: 5;
-    line-clamp: 5;
-  }
-  &.hero {
-    font-size: var(--typography-size-hero);
-    line-height: var(--typography-line-height-header);
-    font-weight: 700;
-  }
-  &.header1 {
-    font-size: var(--typography-size-header1);
-    line-height: var(--typography-line-height-header);
-    font-weight: 700;
-  }
-  &.header2 {
-    font-size: var(--typography-size-header2);
-    line-height: var(--typography-line-height-header);
-    font-weight: 700;
-  }
-  &.header3 {
-    font-size: var(--typography-size-header3);
-    line-height: var(--typography-line-height-header);
-    font-weight: 700;
-  }
-  &.header4 {
-    font-size: var(--typography-size-header4);
-    line-height: var(--typography-line-height-header);
-    font-weight: 700;
-  }
-  &.body {
-    font-size: var(--typography-size-body);
-    line-height: var(--typography-line-height-common);
-    font-weight: 400;
-  }
-  &.label {
-    font-size: var(--typography-size-label);
-    line-height: var(--typography-line-height-common);
-    font-weight: 400;
-  }
-  &.small {
-    font-size: var(--typography-size-small);
-    line-height: var(--typography-line-height-common);
-    font-weight: 400;
-  }
-  &.bold {
-    font-weight: 700;
-  }
-  &.regular {
-    font-weight: 400;
-  }
-  &.light {
-    font-weight: 300;
-  }
-}
-
-/* src/components/ripple/ripple.styles.css */
-.ripple {
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  border-radius: inherit;
-  z-index: 1;
-  .ripple-effect {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    width: 0;
-    height: 0;
-    pointer-events: none;
-    animation: ripple-effect infinite;
-    opacity: 0.4;
-  }
-}
-@keyframes ripple-effect {
-  to {
-    width: 300px;
-    height: 300px;
-    opacity: 0;
-    filter: blur(5px);
-  }
-}
-
-/* src/components/button/button.styles.css */
-.button {
-  --button-blur: 2px;
-  --color: var(--neutral-800);
-  --solid-background: var(--neutral-900);
-  --solid-text: var(--neutral-50);
-  --solid-hover-background: var(--neutral-800);
-  --solid-active-background: var(--neutral-900);
-  --flat-background: hsl(from var(--neutral-100) h s l / 80%);
-  --flat-hover-background: var(--neutral-50);
-  --flat-active-background: var(--neutral-100);
-  --outlined-hover-background: hsl(from var(--neutral-100) h s l / 20%);
-  --outlined-active-background: hsl(from var(--neutral-100) h s l / 50%);
-  --text-hover-background: hsl(from var(--neutral-100) h s l / 20%);
-  --text-active-background: hsl(from var(--neutral-100) h s l / 50%);
-  --shadow-color: hsl(from var(--neutral-800) h s l / 20%);
-  --focus-background: hsl(from var(--neutral-100) h s l / 20%);
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 0.625em 2.1875em;
-  gap: 0.625em;
-  width: auto;
-  border-radius: 0.5em;
-  font-weight: bold;
-  font-size: var(--typography-size-label);
-  cursor: pointer;
-  outline: none;
-  transition: all 150ms ease;
-  user-select: none;
-  &.icon {
-    padding: 0.625em;
-  }
-  &.full {
-    width: 100%;
-  }
-  &.no-wrap {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  &.size-small {
-    font-size: var(--typography-size-small);
-  }
-  &.size-regular {
-    font-size: var(--typography-size-label);
-  }
-  &.size-large {
-    font-size: var(--typography-size-body);
-  }
-  &.radius-none {
-    border-radius: 0;
-  }
-  &.radius-small {
-    border-radius: 0.25em;
-  }
-  &.radius-medium {
-    border-radius: 0.5em;
-  }
-  &.radius-large {
-    border-radius: 1em;
-  }
-  &.radius-full {
-    border-radius: 100rem;
-  }
-  &:not(:disabled) {
-    &:hover,
-    &:active,
-    &:focus-visible {
-      backdrop-filter: blur(var(--button-blur));
-    }
-    &:hover {
-      transform: scale(1.01);
-      box-shadow: 0 1.4em 0.5em -1em hsl(from var(--black) h s l / 20%), 0 0.7em 1em -0.5em hsl(from var(--black) h s l / 20%);
-    }
-    &:active {
-      transform: scale(0.98);
-      box-shadow: 0 0.3em 0.4em -0.2em hsl(from var(--black) h s l / 20%), 0 0.2em 0.8em -0.1em hsl(from var(--black) h s l / 20%);
-    }
-  }
-  color: var(--color);
-  .ripple-effect {
-    background: var(--color);
-  }
-  &.solid {
-    background: var(--solid-background);
-    color: var(--solid-text);
-    backdrop-filter: blur(var(--button-blur));
-    .ripple-effect {
-      background: var(--solid-text);
-    }
-    &:focus-visible {
-      box-shadow: 0 0 0 0.3125em var(--shadow-color);
-      background: var(--solid-background);
-    }
-    &:hover {
-      background: var(--solid-hover-background);
-    }
-    &:active {
-      background: var(--solid-active-background);
-    }
-  }
-  &.flat {
-    background: var(--flat-background);
-    backdrop-filter: blur(var(--button-blur));
-    &:hover {
-      background: var(--flat-hover-background);
-    }
-    &:active {
-      background: var(--flat-active-background);
-    }
-  }
-  &.outlined {
-    background: transparent;
-    border: 1px solid;
-    &:hover {
-      background: var(--outlined-hover-background);
-    }
-    &:active {
-      background: var(--outlined-active-background);
-    }
-  }
-  &.text {
-    background: transparent;
-    &:hover {
-      background: var(--text-hover-background);
-    }
-    &:active {
-      background: var(--text-active-background);
-    }
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 0.3125em var(--shadow-color);
-    background: var(--focus-background);
-  }
-  &.primary {
-    --color: var(--primary-500);
-    --solid-background: var(--primary-500);
-    --solid-text: var(--primary-50);
-    --solid-hover-background: var(--primary-400);
-    --solid-active-background: var(--primary-600);
-    --flat-background: hsl(from var(--primary-100) h s l / 80%);
-    --flat-hover-background: var(--primary-50);
-    --flat-active-background: var(--primary-100);
-    --outlined-hover-background: hsl(from var(--primary-100) h s l / 20%);
-    --outlined-active-background: hsl(from var(--primary-100) h s l / 50%);
-    --text-hover-background: hsl(from var(--primary-100) h s l / 20%);
-    --text-active-background: hsl(from var(--primary-100) h s l / 50%);
-    --shadow-color: hsl(from var(--primary-500) h s l / 20%);
-    --focus-background: hsl(from var(--primary-100) h s l / 20%);
-  }
-  &.secondary {
-    --color: var(--secondary-500);
-    --solid-background: var(--secondary-500);
-    --solid-text: var(--secondary-50);
-    --solid-hover-background: var(--secondary-400);
-    --solid-active-background: var(--secondary-600);
-    --flat-background: hsl(from var(--secondary-100) h s l / 80%);
-    --flat-hover-background: var(--secondary-50);
-    --flat-active-background: var(--secondary-100);
-    --outlined-hover-background: hsl(from var(--secondary-100) h s l / 20%);
-    --outlined-active-background: hsl(from var(--secondary-100) h s l / 50%);
-    --text-hover-background: hsl(from var(--secondary-100) h s l / 20%);
-    --text-active-background: hsl(from var(--secondary-100) h s l / 50%);
-    --shadow-color: hsl(from var(--secondary-500) h s l / 20%);
-    --focus-background: hsl(from var(--secondary-100) h s l / 20%);
-  }
-  &.tertiary {
-    --color: var(--tertiary-500);
-    --solid-background: var(--tertiary-500);
-    --solid-text: var(--tertiary-50);
-    --solid-hover-background: var(--tertiary-400);
-    --solid-active-background: var(--tertiary-600);
-    --flat-background: hsl(from var(--tertiary-100) h s l / 80%);
-    --flat-hover-background: var(--tertiary-50);
-    --flat-active-background: var(--tertiary-100);
-    --outlined-hover-background: hsl(from var(--tertiary-100) h s l / 20%);
-    --outlined-active-background: hsl(from var(--tertiary-100) h s l / 50%);
-    --text-hover-background: hsl(from var(--tertiary-100) h s l / 20%);
-    --text-active-background: hsl(from var(--tertiary-100) h s l / 50%);
-    --shadow-color: hsl(from var(--tertiary-500) h s l / 20%);
-    --focus-background: hsl(from var(--tertiary-100) h s l / 20%);
-  }
-  &.active {
-    --color: var(--active-500);
-    --solid-background: var(--active-500);
-    --solid-text: var(--active-50);
-    --solid-hover-background: var(--active-400);
-    --solid-active-background: var(--active-600);
-    --flat-background: hsl(from var(--active-100) h s l / 80%);
-    --flat-hover-background: var(--active-50);
-    --flat-active-background: var(--active-100);
-    --outlined-hover-background: hsl(from var(--active-100) h s l / 20%);
-    --outlined-active-background: hsl(from var(--active-100) h s l / 50%);
-    --text-hover-background: hsl(from var(--active-100) h s l / 20%);
-    --text-active-background: hsl(from var(--active-100) h s l / 50%);
-    --shadow-color: hsl(from var(--active-500) h s l / 20%);
-    --focus-background: hsl(from var(--active-100) h s l / 20%);
-  }
-  &.warning {
-    --color: var(--warning-500);
-    --solid-background: var(--warning-500);
-    --solid-text: var(--warning-50);
-    --solid-hover-background: var(--warning-400);
-    --solid-active-background: var(--warning-600);
-    --flat-background: hsl(from var(--warning-100) h s l / 80%);
-    --flat-hover-background: var(--warning-50);
-    --flat-active-background: var(--warning-100);
-    --outlined-hover-background: hsl(from var(--warning-100) h s l / 20%);
-    --outlined-active-background: hsl(from var(--warning-100) h s l / 50%);
-    --text-hover-background: hsl(from var(--warning-100) h s l / 20%);
-    --text-active-background: hsl(from var(--warning-100) h s l / 50%);
-    --shadow-color: hsl(from var(--warning-500) h s l / 20%);
-    --focus-background: hsl(from var(--warning-100) h s l / 20%);
-  }
-  &.alert {
-    --color: var(--alert-500);
-    --solid-background: var(--alert-500);
-    --solid-text: var(--alert-50);
-    --solid-hover-background: var(--alert-400);
-    --solid-active-background: var(--alert-600);
-    --flat-background: hsl(from var(--alert-100) h s l / 80%);
-    --flat-hover-background: var(--alert-50);
-    --flat-active-background: var(--alert-100);
-    --outlined-hover-background: hsl(from var(--alert-100) h s l / 20%);
-    --outlined-active-background: hsl(from var(--alert-100) h s l / 50%);
-    --text-hover-background: hsl(from var(--alert-100) h s l / 20%);
-    --text-active-background: hsl(from var(--alert-100) h s l / 50%);
-    --shadow-color: hsl(from var(--alert-500) h s l / 20%);
-    --focus-background: hsl(from var(--alert-100) h s l / 20%);
-  }
-  &.info {
-    --color: var(--info-500);
-    --solid-background: var(--info-500);
-    --solid-text: var(--info-50);
-    --solid-hover-background: var(--info-400);
-    --solid-active-background: var(--info-600);
-    --flat-background: hsl(from var(--info-100) h s l / 80%);
-    --flat-hover-background: var(--info-50);
-    --flat-active-background: var(--info-100);
-    --outlined-hover-background: hsl(from var(--info-100) h s l / 20%);
-    --outlined-active-background: hsl(from var(--info-100) h s l / 50%);
-    --text-hover-background: hsl(from var(--info-100) h s l / 20%);
-    --text-active-background: hsl(from var(--info-100) h s l / 50%);
-    --shadow-color: hsl(from var(--info-500) h s l / 20%);
-    --focus-background: hsl(from var(--info-100) h s l / 20%);
-  }
-  &:disabled {
-    color: var(--neutral-200);
-    pointer-events: none;
-  }
-  &.solid:disabled {
-    background: var(--neutral-200);
-    color: var(--neutral-50);
-  }
-  &.flat:disabled {
-    background: hsl(from var(--neutral-50) h s l / 80%);
-  }
-  &.outlined:disabled,
-  &.text:disabled {
-    background: transparent;
-  }
-}
-
-/* src/components/cursor/cursor.styles.css */
-.cursor-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  cursor: none;
-  pointer-events: none;
-}
-.cursor {
-  position: fixed;
-  border-radius: 50%;
-  z-index: 99999999;
-  pointer-events: none;
-  transform: translateZ(0);
-  @media (any-pointer: coarse) {
-    display: none;
-  }
-  &.outer-circle {
-    margin-left: -15px;
-    margin-top: -15px;
-    width: 30px;
-    height: 30px;
-    border: 2px solid var(--primary-500);
-    box-sizing: border-box;
-    z-index: 99999999;
-    opacity: 0.5;
-    transition:
-      all 0.08s ease-out,
-      width 0.3s ease-in-out,
-      height 0.3s ease-in-out,
-      margin 0.3s ease-in-out,
-      opacity 0.3s ease-in-out;
-    &.cursor-hover {
-      margin-left: -40px;
-      margin-top: -40px;
-      width: 80px;
-      height: 80px;
-      background-color: var(--primary-500);
-      opacity: 0.3;
-    }
-    &.cursor-text {
-      margin-left: -2px;
-      margin-top: -40px;
-      width: 4px;
-      height: 80px;
-      background-color: var(--primary-500);
-      opacity: 0.3;
-    }
-  }
-  &.inner-circle {
-    margin-left: -3px;
-    margin-top: -3px;
-    width: 6px;
-    height: 6px;
-    z-index: 99999999;
-    background-color: var(--primary-500);
-    transition: opacity 0.3s ease-in-out;
-    opacity: 1;
-    &.cursor-hover {
-      opacity: 0;
-    }
-  }
-}
-
-/* src/components/form/checkbox/checkbox.styles.css */
-.checkbox {
-  border-radius: 40%;
-  background: var(--background-paper);
-  transition: all 300ms ease;
-  width: 1em;
-  height: 1em;
-  margin: 2px;
-  outline: 1px solid;
-  display: flex;
-  position: relative;
-  .checkbox-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    opacity: 0;
-    z-index: 2;
-  }
-  &.size-small {
-    font-size: 1em;
-  }
-  &.size-regular {
-    font-size: 1.2em;
-  }
-  &.size-large {
-    font-size: 1.4em;
-  }
-}
-.checkbox-fill {
-  transition: all 200ms ease-out;
-  border-radius: inherit;
-  margin: auto;
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  position: relative;
-  display: grid;
-  place-content: center;
-  place-items: center;
-  .checkbox-icon {
-    font-size: 0.7em;
-    z-index: 1;
-    opacity: 0;
-    transition: opacity 300ms ease;
-  }
-}
-.checkbox-container {
-  --color: var(--neutral-800);
-  --color-icon: var(--neutral-50);
-  --color-hover: hsl(from var(--neutral-800) h s l / 50%);
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: auto 1fr;
-  align-items: center;
-  gap: 0.5em;
-  width: fit-content;
-  .checkbox-label {
-    cursor: pointer;
-    user-select: none;
-    width: 100%;
-  }
-  .checkbox {
-    color: var(--color);
-    &.is-checked {
-      .checkbox-fill {
-        width: 100%;
-        height: 100%;
-        background: var(--color);
-        color: var(--color-icon);
-      }
-      .checkbox-icon {
-        opacity: 1;
-      }
-    }
-  }
-  .checkbox:hover,
-  &:has(.checkbox-label:hover) .checkbox {
-    box-shadow: 0 0 0 0.3em var(--color-hover);
-    .checkbox-fill {
-      width: 20%;
-      height: 20%;
-      border-radius: 20%;
-      background: var(--color-hover);
-      color: var(--color-icon);
-    }
-    &:is(.is-checked) {
-      .checkbox-fill {
-        width: 100%;
-        height: 100%;
-        border-radius: inherit;
-        background: var(--color);
-      }
-    }
-  }
-  .checkbox:focus,
-  &:has(.checkbox-input:focus) .checkbox,
-  &:has(.checkbox-label:focus) .checkbox {
-    box-shadow: 0 0 0 0.3em var(--color-hover);
-  }
-  &.color-primary {
-    --color: var(--primary-500);
-    --color-icon: var(--primary-50);
-    --color-hover: hsl(from var(--primary-500) h s l / 50%);
-  }
-  &.color-secondary {
-    --color: var(--secondary-500);
-    --color-icon: var(--secondary-50);
-    --color-hover: hsl(from var(--secondary-500) h s l / 50%);
-  }
-  &.color-tertiary {
-    --color: var(--tertiary-500);
-    --color-icon: var(--tertiary-50);
-    --color-hover: hsl(from var(--tertiary-500) h s l / 50%);
-  }
-  &.color-active {
-    --color: var(--active-500);
-    --color-icon: var(--active-50);
-    --color-hover: hsl(from var(--active-500) h s l / 50%);
-  }
-  &.color-warning {
-    --color: var(--warning-500);
-    --color-icon: var(--warning-50);
-    --color-hover: hsl(from var(--warning-500) h s l / 50%);
-  }
-  &.color-alert {
-    --color: var(--alert-500);
-    --color-icon: var(--alert-50);
-    --color-hover: hsl(from var(--alert-500) h s l / 50%);
-  }
-  &.color-info {
-    --color: var(--info-500);
-    --color-icon: var(--info-50);
-    --color-hover: hsl(from var(--info-500) h s l / 50%);
-  }
-}
-
-/* src/components/form/field/field.styles.css */
-.form-field {
-  display: grid;
-  grid-auto-columns: auto;
-  gap: 0.5em;
-  transition: all 200ms ease;
-  .field-content {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    align-items: center;
-  }
-  .field-left-icon,
-  .field-right-icon {
-    font-size: 1em;
-  }
-  .field-left-icon {
-    margin-right: 1em;
-  }
-  .field-right-icon {
-    margin-left: 1em;
-  }
-  .field-message {
-    display: grid;
-    grid-auto-flow: column;
-    gap: 5px;
-    align-items: center;
-    justify-content: start;
-  }
-  &.variant-content-border {
-    .field-content {
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 1em;
-      background: var(--background);
-    }
-  }
-  &.variant-content-line {
-    .field-content {
-      border-bottom: 1px solid;
-      padding: 0.5em 0;
-    }
-  }
-  &.variant-full-border {
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    padding: 0.5em 0;
-    background: var(--background);
-    .field-label,
-    .field-content,
-    .field-message {
-      padding: 0 1em;
-    }
-  }
-  &.variant-inline {
-    grid-auto-flow: column;
-    padding: 0.5em 0;
-    align-items: center;
-    .field-label {
-      width: auto;
-    }
-  }
-  &.error {
-    color: var(--alert-500);
-    border-color: var(--alert-500);
-  }
-  &.focus {
-    color: var(--info-500);
-    border-color: var(--info-500);
-  }
-  &.error,
-  &.focus {
-    .field-left-icon,
-    .field-right-icon,
-    .field-children {
-      color: var(--foreground);
-      border-color: var(--foreground);
-    }
-  }
-  .field-children > * {
-    width: 100%;
-  }
-}
-
-/* src/components/modals/modal/modal.styles.css */
-.modal {
-  position: fixed;
-  z-index: 1001;
-  pointer-events: none;
-}
-.modal-content {
-  background: var(--background-paper);
-  pointer-events: initial;
-  &.animation-fade-down {
-    animation: fadeInDown 200ms ease;
-    &.modal-close {
-      animation: fadeOutUp 200ms ease;
-      transform: translateY(-10px);
-      opacity: 0;
-    }
-  }
-  &.animation-bounce {
-    animation: bounceIn 500ms ease;
-    &.modal-close {
-      animation: bounceOut 500ms ease;
-      transform: scale3d(0.3, 0.3, 0.3);
-      opacity: 0;
-    }
-  }
-}
-.modal-backdrop {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: 1000;
-  animation: backdropOpen 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
-  &.backdrop-close {
-    animation: backdropClose 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-}
-@keyframes backdropOpen {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@keyframes backdropClose {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-}
-
-/* src/components/modals/action-modal/action-modal.styles.css */
-.action-modal {
-  background: transparent;
-  .modal-content {
-    &.shake-animation {
-      animation: headShake 600ms linear;
-    }
-  }
-}
-.action-modal-content {
-  position: relative;
-  .action-modal-body {
-    box-shadow: 0 0 10px -5px;
-    border-radius: 10px;
-    overflow: hidden;
-    display: grid;
-  }
-  .action-modal-content {
-    background: var(--background);
-    padding: 3em 4em 2em;
-    display: grid;
-    gap: 1em;
-  }
-  &.no-padding .action-modal-content {
-    padding: 2em 0 0;
-  }
-  &:has(.action-modal-icon) .action-modal-content {
-    padding-top: 4em;
-  }
-  &.back-card {
-    &::before {
-      content: "";
-      position: absolute;
-      width: 90%;
-      height: 100%;
-      top: 8px;
-      left: 50%;
-      transform: translate(-50%);
-      z-index: -1;
-      background: var(--primary-500);
-      border-radius: 10px;
-      display: block;
-      transition: top 300ms cubic-bezier(0.81, -0.52, 0.42, 2.5);
-    }
-  }
-  .action-modal-icon {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: var(--primary-500);
-    color: var(--primary-50);
-    padding: 0;
-    border-radius: 50%;
-    width: 2em;
-    height: 2em;
-    display: grid;
-    place-content: center;
-    transition: box-shadow 300ms cubic-bezier(0.81, -0.52, 0.42, 2.5);
-    z-index: 1;
-    box-shadow:
-      0 0 0 0 hsl(from var(--primary-500) h s l / 53%),
-      0 0 0 0 hsl(from var(--primary-500) h s l / 40%),
-      0 0 0 0 hsl(from var(--primary-500) h s l / 27%),
-      0 0 0 0 hsl(from var(--primary-500) h s l / 14%);
-  }
-  .close-modal-button {
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
-    cursor: pointer;
-    background: var(--background);
-    position: absolute;
-    top: 10px;
-    right: 5px;
-    font-size: var(--typography-size-label);
-    opacity: 0;
-    transition: opacity 300ms ease;
-    z-index: 1;
-  }
-  &.line-on-top {
-    .action-modal-content {
-      border-top: 5px solid var(--primary-500);
-    }
-  }
-  &:hover {
-    .action-modal-icon {
-      box-shadow:
-        0 0 0 7px hsl(from var(--primary-500) h s l / 53%),
-        0 0 0 14px hsl(from var(--primary-500) h s l / 40%),
-        0 0 0 21px hsl(from var(--primary-500) h s l / 27%),
-        0 0 0 28px hsl(from var(--primary-500) h s l / 14%);
-    }
-    .close-modal-button {
-      opacity: 1;
-    }
-    &::before {
-      top: 15px;
-    }
-  }
-}
-
-/* src/components/modals/aside-modal/aside-modal.styles.css */
-.aside-modal {
-  color: var(--foreground);
-  overflow: auto;
-  height: 100%;
-  .aside-modal-content {
-    padding: 2em;
-  }
-  .close-modal-button {
-    border-radius: 50%;
-    cursor: pointer;
-    display: grid;
-    place-content: center;
-    background: var(--background);
-    border: 4px solid var(--primary-500);
-    position: absolute;
-    padding: 0.5em;
-  }
-  &.left {
-    border-right: 4px solid var(--primary-500);
-    animation: slideIn-left 300ms ease;
-    &.modal-close {
-      animation: slideOut-left 300ms ease;
-      transform: translateX(-100%);
-    }
-    .close-modal-button {
-      top: 2em;
-      left: 100%;
-      transform: translate(calc(-50% + 2px));
-    }
-  }
-  &.right {
-    border-left: 4px solid var(--primary-500);
-    animation: slideIn-right 300ms ease;
-    &.modal-close {
-      animation: slideOut-right 300ms ease;
-      transform: translateX(100%);
-    }
-    .close-modal-button {
-      top: 2em;
-      right: 100%;
-      transform: translate(calc(50% - 2px));
-    }
-  }
-  &.top {
-    border-bottom: 4px solid var(--primary-500);
-    animation: slideIn-top 300ms ease;
-    &.modal-close {
-      animation: slideOut-top 300ms ease;
-      transform: translateY(-100%);
-    }
-    .close-modal-button {
-      bottom: 0;
-      right: 2em;
-      transform: translate(0, calc(50% - 2px));
-    }
-  }
-  &.bottom {
-    border-top: 4px solid var(--primary-500);
-    animation: slideIn-bottom 300ms ease;
-    &.modal-close {
-      animation: slideOut-bottom 300ms ease;
-      transform: translateY(100%);
-    }
-    .close-modal-button {
-      top: 0;
-      right: 2em;
-      transform: translate(0, calc(-50% + 2px));
-    }
-  }
-}
-
-/* src/components/modals/confirmation-modal/confirmation-modal.styles.css */
-.confirmation-modal {
-  display: grid;
-  max-width: 450px;
-  gap: 1em;
-  place-content: center;
-  justify-items: center;
-  text-align: center;
-  .confirmation-modal-actions {
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: center;
-    gap: 1em;
-  }
-}
-
-/* src/components/modals/menu/menu.styles.css */
-.menu-modal {
-  border-radius: 0.5em;
-  border: 1px solid var(--border);
-  background: var(--background);
-  box-shadow: 0 0 25px var(--background-paper);
-  user-select: none;
-  position: relative;
-  overflow-y: auto;
-  .menu-content {
-    display: grid;
-    gap: 0.2em;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    align-content: start;
-    height: 100%;
-    position: relative;
-    overflow-y: auto;
-  }
-  .divider {
-    margin: 0.4em 0;
-    color: var(--border);
-  }
-}
-.menu-label {
-  background: var(--background);
-  color: var(--foreground);
-  font-weight: lighter;
-  padding: 0.5em 1.2em;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  pointer-events: none;
-}
-.menu-option {
-  padding: 0.2em 1em;
-  border-radius: 0.3em;
-  transition: all 300ms ease;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  outline: 0;
-  margin: 0 0.2em;
-  position: relative;
-  .ripple-effect {
-    background: hsl(from var(--foreground) h s l / 31%);
-  }
-  &:first-child {
-    margin-top: 5px;
-  }
-  .option-icon {
-    margin-right: 0.5em;
-  }
-  .menu-checkbox {
-    width: 100%;
-  }
-  &.is-disabled {
-    opacity: 0.4;
-    pointer-events: none;
-    cursor: default;
-  }
-  &:focus,
-  &:hover {
-    background: hsl(from var(--background-paper) h s l / 25%);
-  }
-  &.is-selected {
-    background: var(--background-paper);
-    &:focus,
-    &:hover {
-      background: hsl(from var(--background-paper) h s l / 75%);
-    }
-  }
-}
-.menu-group {
-  position: relative;
-  .menu-group-content {
-    display: grid;
-    gap: 0.2em;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    align-content: start;
-    position: relative;
-  }
-}
-
-/* src/components/form/input-color/input-color.styles.css */
-.input-color {
-  display: grid;
-  grid-auto-flow: column;
-  align-items: center;
-  justify-content: start;
-  gap: 0.5em;
-  .input-color-value {
-    margin-left: 10px;
-  }
-  .color-input {
-    padding-right: 1em;
-    border-radius: inherit;
-    width: 100%;
-    font-size: var(--typography-size-label);
-    font-family: var(--typography-family-main) sans-serif;
-  }
-}
-.input-color-box {
-  background: white;
-  border-radius: 5px;
-  border: 2px solid;
-  width: 25px;
-  height: 25px;
-  position: relative;
-  cursor: pointer;
-  &::before {
-    content: "";
-    position: absolute;
-    border-radius: inherit;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: repeating-conic-gradient(#cccccc 0% 25%, white 0% 50%) 50% / 8px 8px;
-    z-index: -1;
-  }
-}
-.input-color-selector {
-  display: grid;
-  gap: 10px;
-  background: var(--background);
-  color: var(--foreground);
-  padding: 10px;
-  border-radius: 0 18px 18px 18px;
-  border: 1px solid;
-  box-shadow: 0 5px 30px -5px var(--neutral-900);
-  .react-colorful__pointer {
-    width: 1em;
-    height: 1em;
-    border-radius: 50%;
-  }
-  .react-colorful__hue-pointer,
-  .react-colorful__alpha-pointer {
-    width: 8px;
-    height: 100%;
-    border-radius: 4px;
-    border-width: 2px;
-  }
-  .color-input-container {
-    display: grid;
-    grid-template-columns: 16px 1fr 16px;
-    align-items: center;
-    gap: 10px;
-    border: 1px solid;
-    border-radius: 8px;
-    padding: 0.5em;
-    width: 100%;
-    max-width: 200px;
-  }
-  .color-input {
-    padding: 0;
-    border-radius: inherit;
-    background: var(--background);
-    color: var(--foreground);
-    width: 100%;
-    font-size: var(--typography-size-label);
-    font-family: var(--typography-family-main) sans-serif;
-    letter-spacing: 2px;
-    text-align: center;
-  }
-}
-
-/* src/layouts/grid/grid.styles.css */
-.grida {
-  display: grid;
-}
-
-/* src/components/form/input-file/input-file.styles.css */
-.input-file-container {
-  display: grid;
-  gap: 10px;
-  .input-file--box {
-    border: 1px solid;
-    border-radius: 5px;
-    position: relative;
-    transition: all 0.3s ease;
-    display: grid;
-    grid-template-columns: 32px 1fr;
-    padding: 10px;
-    gap: 10px;
-    background: var(--secondary-500);
-    color: var(--secondary-50);
-    align-items: center;
-    .input-file--box--icon {
-      width: 32px;
-      height: 32px;
-      border-radius: 5px;
-      background: var(--primary-50);
-      color: var(--primary-500);
-      display: grid;
-      place-content: center;
-    }
-    input {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      cursor: copy;
-      opacity: 0;
-    }
-    &:hover {
-      background: var(--primary-50);
-      color: var(--primary-500);
-      .input-file--box--icon {
-        background: var(--primary-500);
-        color: var(--primary-50);
-      }
-    }
-  }
-  .input-file--files {
-    max-height: 280px;
-    overflow-y: auto;
-    border: 1px solid;
-    border-radius: 5px;
-    .input-file--files--content {
-      display: grid;
-    }
-  }
-  .error {
-    color: tomato;
-  }
-  .total-info {
-    font-size: 1em;
-    display: grid;
-    grid-auto-flow: column;
-    justify-content: end;
-    align-items: center;
-    gap: 0.5em;
-    .total-info--delete {
-      display: grid;
-      place-content: center;
-      height: 100%;
-      background: transparent;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      aspect-ratio: 1 / 1;
-      border-radius: 50%;
-      width: 2em;
-      font-size: 0.8em;
-      &:hover {
-        background: var(--primary-500);
-        color: var(--primary-50);
-      }
-    }
-  }
-}
-.input-file-card {
-  display: grid;
-  grid-template-columns: 35px 1fr 35px;
-  gap: 1em;
-  align-items: center;
-  padding: 10px;
-  background: var(--background);
-  &:not(:last-child) {
-    border-bottom: 1px dashed;
-  }
-  &:hover {
-    .file-card--delete {
-      color: var(--primary-500);
-    }
-  }
-  .file-card--image {
-    background: var(--primary-500);
-    color: var(--primary-50);
-    width: 32px;
-    height: 32px;
-    border-radius: 5px;
-    display: grid;
-    place-content: center;
-    border: 1px solid;
-  }
-  .file-card--data {
-    display: grid;
-    font-size: 0.7em;
-    justify-content: start;
-  }
-  .file-card--delete {
-    border-radius: 5px;
-    display: grid;
-    place-content: center;
-    width: 32px;
-    height: 32px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    &:hover {
-      background: var(--primary-500);
-      color: var(--primary-50);
-    }
-  }
-}
-
-/* src/components/form/radio/radio.styles.css */
-.radio {
-  border-radius: 50%;
-  background: var(--background-paper);
-  transition: all 300ms ease;
-  width: 1em;
-  height: 1em;
-  outline: 2px solid;
-  display: flex;
-  position: relative;
-  padding: 2px;
-  .radio-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    opacity: 0;
-    z-index: 1;
-  }
-  &.size-small {
-    font-size: 1em;
-  }
-  &.size-regular {
-    font-size: 1.2em;
-  }
-  &.size-large {
-    font-size: 1.4em;
-  }
-}
-.radio-fill {
-  transition: all 200ms ease-out;
-  border-radius: inherit;
-  margin: auto;
-  width: 0;
-  height: 0;
-}
-.radio-container {
-  --color: var(--neutral-800);
-  display: flex;
-  align-items: center;
-  gap: 1em;
-  width: fit-content;
-  .radio-label {
-    cursor: pointer;
-    user-select: none;
-  }
-  .radio {
-    color: var(--color);
-    &.is-checked {
-      .radio-fill {
-        width: 100%;
-        height: 100%;
-        background: var(--color);
-      }
-    }
-  }
-  .radio:hover,
-  &:has(.radio-label:hover) .radio {
-    box-shadow: 0 0 0 0.4em hsl(from var(--color) h s l / 50%);
-    .radio-fill {
-      width: 20%;
-      height: 20%;
-      background: hsl(from var(--color) h s l / 50%);
-    }
-    &:is(.is-checked) {
-      .radio-fill {
-        width: 80%;
-        height: 80%;
-        background: var(--color);
-      }
-    }
-  }
-  &.color-primary {
-    --color: var(--primary-500);
-  }
-  &.color-secondary {
-    --color: var(--secondary-500);
-  }
-  &.color-tertiary {
-    --color: var(--tertiary-500);
-  }
-  &.color-active {
-    --color: var(--active-500);
-  }
-  &.color-warning {
-    --color: var(--warning-500);
-  }
-  &.color-alert {
-    --color: var(--alert-500);
-  }
-  &.color-info {
-    --color: var(--info-500);
-  }
-}
-
-/* src/components/infinity-scroll/infinity-scroll.styles.css */
-.infinity-scroll {
-  display: grid;
-  place-content: start center;
-  place-items: start center;
-  .loading {
-    width: 100%;
-    height: 30px;
-    display: grid;
-    place-content: center;
-    .loading--icon {
-      animation: spin 0.5s linear infinite;
-      font-size: 20px;
-    }
-  }
-  .empty-message {
-    font-size: 0.8em;
-    text-align: center;
-    color: #a6a6a6;
-  }
-}
-
-/* src/components/form/select/select.styles.css */
-.select {
-  cursor: pointer;
-  .icon-close {
-    display: grid;
-    place-content: center;
-    align-self: center;
-    border-radius: 100%;
-    cursor: pointer;
-    font-size: 0.6em;
-    padding: 0.5em;
-    &:hover {
-      background: hsl(from var(--foreground) h s l / 33%);
-    }
-  }
-  .select-container {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 0.5em;
-    align-items: center;
-    grid-auto-rows: auto;
-    position: relative;
-    cursor: pointer;
-    user-select: none;
-    &.three-columns {
-      grid-template-columns: 1fr auto auto;
-    }
-  }
-  .input-button {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: grid;
-    min-width: 0;
-    width: 100%;
-    border: 0;
-    margin: 0;
-    border-radius: 0;
-    background: transparent;
-    color: currentColor;
-    text-align: left;
-    -webkit-tap-highlight-color: transparent;
-    padding: 0;
-    grid-template-columns: 1fr auto;
-    &.placeholder {
-      color: #919191;
-    }
-  }
-  .select-caret-icon {
-    transition: transform 200ms ease;
-    &.is-select-open {
-      transform: rotate(180deg);
-    }
-  }
-}
-.select-options-menu {
-  .select-menu-content {
-    gap: 0;
-    display: block;
-    height: auto;
-    overflow: initial;
-  }
-}
-.select-options {
-  gap: 0;
-  display: grid;
-  grid-template-rows: 1fr;
-  height: 100%;
-  overflow: auto;
-  &.with-search-query {
-    grid-template-rows: auto 1fr;
-  }
-  .select-options-list-container {
-    height: 100%;
-    overflow: auto;
-  }
-  .select-options-list {
-    display: grid;
-    gap: 0.2em;
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    align-content: start;
-  }
-}
-.select-options-header {
-  background: var(--background);
-  padding: 2px 5px;
-  border-bottom: 1px solid var(--border);
-  .input-search {
-    outline: none;
-    padding: 0.8em 5px;
-    font-size: var(--typography-size-label);
-    width: 100%;
-  }
-}
-
-/* src/components/form/slider/slider.styles.css */
-.input-slider {
-  display: grid;
-  grid-template-columns: 1fr 50px;
-  align-items: center;
-  gap: 10px;
-  .slider {
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    display: grid;
-    align-items: center;
-    &:focus {
-      outline: none;
-    }
-    &::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      width: 20px;
-      height: 20px;
-      border-radius: 1em;
-      background: var(--primary-500);
-      box-shadow: 0 0 0 0 var(--neutral-500);
-      margin-top: -8px;
-      transition: all 300ms ease;
-      cursor: pointer;
-    }
-    &::-webkit-slider-runnable-track {
-      height: 4px;
-      border-radius: 1em;
-      background: hsl(from var(--primary-200) h s l / 50%);
-      transition: all 300ms ease;
-    }
-    &:focus,
-    &:hover {
-      &::-webkit-slider-thumb {
-        background: var(--primary-500);
-        box-shadow: 0 0 0 6px hsl(from var(--primary-500) h s l / 50%);
-        cursor: grab;
-      }
-    }
-    &:active {
-      &::-webkit-slider-thumb {
-        box-shadow: 0 0 0 12px hsl(from var(--primary-500) h s l / 31%);
-        cursor: grabbing;
-      }
-    }
-    &:focus {
-      &::-webkit-slider-runnable-track {
-        background: var(--primary-300);
-      }
-    }
-  }
-  &:has(.slider-number:focus) .slider::-webkit-slider-thumb,
-  &:has(.slider-number:hover) .slider::-webkit-slider-thumb {
-    background: var(--primary-500);
-    box-shadow: 0 0 0 6px hsl(from var(--primary-500) h s l / 31%);
-  }
-  .slider-number {
-    transition: all 300ms ease;
-    border: 1px solid;
-    border-radius: 5px;
-    text-align: center;
-    font-size: var(--typography-size-label);
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    width: 100%;
-    padding: 4px 8px;
-    font-weight: bold;
-    color: inherit;
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-  &.is-focus {
-    .slider-number {
-      color: var(--primary-500);
-    }
-  }
-}
-
-/* src/components/form/textarea/textarea.styles.css */
-.textarea {
-  border: 0;
-  outline: 0;
-  field-sizing: content;
-}
-
-/* src/components/tooltips/tooltip/tooltip.styles.css */
-.tooltip {
-  color: var(--foreground);
-  font-size: var(--typography-size-small);
-  line-height: 1em;
-  border-radius: 5px;
-  padding: 0.5em 1em;
-  display: block;
-  border: 1px solid;
-  pointer-events: none;
-  &::before {
-    content: "";
-    display: block;
-    background: var(--background-paper);
-    position: absolute;
-    z-index: 1;
-    width: 10px;
-    height: 10px;
-    border-left: 1px solid transparent;
-    border-top: 1px solid transparent;
-    border-right: 1px solid var(--foreground);
-    border-bottom: 1px solid var(--foreground);
-    border-radius: 0 0 3px 0;
-  }
-  &.left {
-    animation: fadeInRight 250ms ease-out;
-    &.close-animation {
-      animation: fadeOutLeft 250ms ease-out;
-      transform: translateX(-10px);
-      opacity: 0;
-    }
-    &::before {
-      top: 50%;
-      left: 100%;
-      transform: translate(-50%, -50%) rotate(-45deg);
-    }
-  }
-  &.right {
-    animation: fadeInLeft 250ms ease-out;
-    &.close-animation {
-      animation: fadeOutRight 250ms ease-out;
-      transform: translateX(10px);
-      opacity: 0;
-    }
-    &::before {
-      top: 50%;
-      right: 100%;
-      transform: translate(50%, -50%) rotate(135deg);
-    }
-  }
-  &.top {
-    animation: fadeInDown 250ms ease-out;
-    &.close-animation {
-      animation: fadeOutUp 250ms ease-out;
-      transform: translateY(-10px);
-      opacity: 0;
-    }
-    &::before {
-      top: 100%;
-      left: 50%;
-      transform: translate(-50%, -50%) rotate(45deg);
-    }
-  }
-  &.bottom {
-    animation: fadeInUp 250ms ease-out;
-    &.close-animation {
-      animation: fadeOutDown 250ms ease-out;
-      transform: translateY(10px);
-      opacity: 0;
-    }
-    &::before {
-      left: 50%;
-      bottom: 100%;
-      transform: translate(-50%, 50%) rotate(-135deg);
-    }
-  }
-}
-
-/* src/components/form/switch/switch.styles.css */
-.switch-container {
-  --width: attr(data-width);
-  --dot-size: attr(data-dot-size);
-  --dot-hover-size: attr(data-dot-hover-size);
-  --padding: attr(data-padding);
-  --color: var(--neutral-500);
-  --color-dark: var(--neutral-800);
-  --color-contrast: var(--neutral-50);
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
-  width: fit-content;
-  .switch {
-    width: calc(var(--width) + var(--padding) * 2);
-    border-radius: 100em;
-    background: var(--background-paper);
-    padding: var(--padding);
-    transition: all 300ms ease;
-    position: relative;
-    .switch-dot {
-      width: var(--dot-size);
-      height: var(--dot-size);
-      border-radius: 100em;
-      background: var(--color);
-      display: block;
-      transition: all 300ms ease;
-      margin-left: 0;
-      position: relative;
-      z-index: 1;
-    }
-    .switch-icon {
-      cursor: pointer;
-      display: block;
-    }
-    .switch-internal-left-icon,
-    .switch-internal-right-icon {
-      width: var(--dot-size);
-      height: var(--dot-size);
-      position: absolute;
-      top: var(--padding);
-      display: grid;
-      place-content: center;
-      color: var(--color-contrast);
-      transition: all 300ms ease;
-    }
-    .switch-internal-left-icon {
-      left: var(--padding);
-    }
-    .switch-internal-right-icon {
-      right: var(--padding);
-    }
-    &.is-checked {
-      background: var(--color);
-      .switch-dot {
-        margin-left: calc(var(--width) - var(--dot-size));
-        background: color-mix(in hsl, var(--color), var(--color-contrast) 75%);
-      }
-    }
-    &:not(.is-readonly):has(input:disabled) {
-      background: var(--background-disabled);
-      .switch-dot {
-        background: var(--foreground-disabled);
-      }
-      .switch-internal-left-icon,
-      .switch-internal-right-icon {
-        color: var(--foreground-disabled);
-      }
-      &.is-checked {
-        background: var(--color-dark);
-      }
-    }
-    .switch-checkbox {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      opacity: 0;
-      z-index: 3;
-    }
-  }
-  .switch-label {
-    cursor: pointer;
-    user-select: none;
-    padding: 0 0.5em;
-  }
-  .switch:not(:has(.is-readonly, input:disabled)):hover .switch-dot,
-  &:has(.switch-icon:hover) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot,
-  &:has(.switch-label:hover) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot {
-    box-shadow: 0 0 0 calc(0.3 * var(--dot-size)) color-mix(in hsl, var(--color) 50%, var(--color-contrast));
-  }
-  .switch:not(:has(.is-readonly, input:disabled)):active .switch-dot,
-  &:has(.switch-icon:active) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot,
-  &:has(.switch-label:active) .switch:not(:has(.is-readonly, input:disabled)) .switch-dot {
-    width: var(--dot-hover-size);
-  }
-  .switch:not(:has(.is-readonly, input:disabled)).is-checked:active .switch-dot,
-  &:has(.switch-icon:active) .switch:not(:has(.is-readonly, input:disabled)).is-checked .switch-dot,
-  &:has(.switch-label:active) .switch:not(:has(.is-readonly, input:disabled)).is-checked .switch-dot {
-    margin-left: calc(var(--width) - var(--dot-hover-size));
-  }
-  &.color-primary {
-    --color: var(--primary-500);
-    --color-dark: var(--primary-700);
-    --color-contrast: var(--primary-50);
-  }
-  &.color-secondary {
-    --color: var(--secondary-500);
-    --color-dark: var(--secondary-700);
-    --color-contrast: var(--secondary-50);
-  }
-  &.color-tertiary {
-    --color: var(--tertiary-500);
-    --color-dark: var(--tertiary-700);
-    --color-contrast: var(--tertiary-50);
-  }
-  &.color-active {
-    --color: var(--active-500);
-    --color-dark: var(--active-700);
-    --color-contrast: var(--active-50);
-  }
-  &.color-warning {
-    --color: var(--warning-500);
-    --color-dark: var(--warning-700);
-    --color-contrast: var(--warning-50);
-  }
-  &.color-alert {
-    --color: var(--alert-500);
-    --color-dark: var(--alert-700);
-    --color-contrast: var(--alert-50);
-  }
-  &.color-info {
-    --color: var(--info-500);
-    --color-dark: var(--info-700);
-    --color-contrast: var(--info-50);
-  }
-}
-
-/* src/components/smart-table/smart-table.styles.css */
-.smart-table-container {
-  border: 0 solid var(--primary-500);
-  border-radius: 5px;
-  overflow: auto;
-  height: 100%;
-  width: 100%;
-  margin: auto;
-}
-.smart-table {
-  border-collapse: collapse;
-  position: relative;
-  width: 100%;
-  &.layout-fixed {
-    table-layout: fixed;
-  }
-  &.layout-scrollable {
-    table-layout: auto;
-  }
-  thead {
-    position: sticky;
-    z-index: 10;
-    top: 0;
-    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.2), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-    tr {
-      background: var(--primary-500);
-      color: var(--primary-50);
-      transition: all 300ms ease;
-    }
-  }
-  tbody {
-    tr {
-      box-shadow: inset 0 0 0 0 var(--primary-500);
-      transition: box-shadow 300ms ease;
-      &.row-selected,
-      &:hover {
-        background: var(--background-paper);
-      }
-      &.row-selected {
-        box-shadow: inset 10px 0 0 -5px var(--primary-500);
-      }
-      &:not(:last-child) {
-        border-bottom: 1px solid var(--border);
-      }
-    }
-  }
-  th {
-    padding: 0.8em 1.2em;
-    user-select: none;
-    &.sort-on-click {
-      cursor: pointer;
-    }
-    .sort-icon {
-      width: 1em;
-      display: block;
-    }
-    svg {
-      animation: fadeIn 300ms ease;
-    }
-    path {
-      transition: all 300ms ease;
-    }
-    &:first-child {
-      padding-left: 2em;
-    }
-    &:last-child {
-      padding-right: 2em;
-    }
-  }
-  td {
-    transition: all 300ms ease;
-    padding: 0.6em 1em;
-    &:first-child {
-      padding-left: 2em;
-    }
-    &:last-child {
-      padding-right: 2em;
-    }
-  }
-}
-
-/* src/components/tabs/tabs.styles.css */
-.tab {
-  cursor: pointer;
-  user-select: none;
-  transition: all 300ms ease;
-}
-.tab-list {
-  --color: var(--neutral-900);
-  --color-contrast: var(--neutral-50);
-  --inner-radius: 0;
-  --outer-radius: 0;
-  display: grid;
-  grid-auto-flow: column;
-  gap: 1em;
-  align-items: center;
-  position: relative;
-  font-size: var(--typography-size-label);
-  border-radius: var(--outer-radius);
-  .tab,
-  .tabs-selector {
-    border-radius: var(--inner-radius);
-  }
-  &.size-small {
-    font-size: var(--typography-size-small);
-  }
-  &.size-medium {
-    font-size: var(--typography-size-label);
-  }
-  &.size-large {
-    font-size: var(--typography-size-body);
-  }
-  .tabs-selector {
-    position: absolute;
-    background: var(--color);
-    color: var(--color-contrast);
-    border-radius: 1.5em;
-    &.active {
-      transition: all 300ms ease;
-    }
-  }
-  .tab {
-    border-radius: 1.5em;
-    padding: 0.5em 1em;
-    z-index: 1;
-    text-align: center;
-    &.is-open {
-      color: var(--color-contrast);
-    }
-    &:not(.is-open):hover {
-      color: var(--neutral-900);
-    }
-  }
-  &.radius-none {
-    --outer-radius: 0;
-    --inner-radius: 0;
-  }
-  &.radius-small {
-    --outer-radius: 0.5em;
-    --inner-radius: 0.5em;
-  }
-  &.radius-medium {
-    --outer-radius: 1em;
-    --inner-radius: 0.8em;
-  }
-  &.radius-large {
-    --outer-radius: 1.5em;
-    --inner-radius: 1.3em;
-  }
-  &.radius-full {
-    --outer-radius: 1.8em;
-    --inner-radius: 1.6em;
-  }
-  &.vertical-direction {
-    grid-auto-flow: row;
-    align-items: unset;
-    align-content: start;
-  }
-  &.variant-solid {
-    background: var(--background-paper);
-    color: var(--foreground);
-    padding: 0.5em;
-  }
-  &.variant-ghost {
-    border: 1px solid var(--color);
-    padding: 0.5em;
-  }
-  &.variant-flat {
-  }
-  &.variant-line {
-    border-radius: 0;
-    &:not(.vertical-direction) {
-      border-bottom: 2px solid var(--border);
-    }
-    .tabs-selector {
-      border-radius: 0;
-    }
-    .tab {
-      border-radius: 0;
-      &.is-open {
-        color: var(--color);
-      }
-    }
-  }
-  &.color-primary {
-    --color: var(--primary-500);
-    --color-contrast: var(--primary-50);
-  }
-  &.color-secondary {
-    --color: var(--secondary-500);
-    --color-contrast: var(--secondary-50);
-  }
-  &.color-tertiary {
-    --color: var(--tertiary-500);
-    --color-contrast: var(--tertiary-50);
-  }
-  &.color-active {
-    --color: var(--active-500);
-    --color-contrast: var(--active-50);
-  }
-  &.color-warning {
-    --color: var(--warning-500);
-    --color-contrast: var(--warning-50);
-  }
-  &.color-alert {
-    --color: var(--alert-500);
-    --color-contrast: var(--alert-50);
-  }
-  &.color-info {
-    --color: var(--info-500);
-    --color-contrast: var(--info-50);
-  }
-}
-
-/* src/components/tag/tag.styles.css */
-.tag {
-  --background: attr(data-background, var(--primary-500));
-  --text: attr(data-text, var(--primary-50));
-  --background-selected: attr(data-background-selected, var(--primary-700));
-  --text-selected: attr(data-text-selected, var(--primary-50));
-  padding: 0.4em 0.8em;
-  border-radius: 0.3em;
-  border: 1px solid;
-  background: var(--background);
-  color: var(--text);
-  transition: all 300ms ease;
-  display: inline-block;
-  font-size: var(--typography-size-label);
-  user-select: none;
-  &.no-wrap {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  &.rounded-none {
-    border-radius: 0;
-  }
-  &.rounded-small {
-    border-radius: 0.25em;
-  }
-  &.rounded-medium {
-    border-radius: 0.5em;
-  }
-  &.rounded-large {
-    border-radius: 1em;
-  }
-  &.rounded-full {
-    border-radius: 100rem;
-  }
-  &:hover,
-  &.is-selected {
-    background: var(--background-selected);
-    color: var(--text-selected);
-  }
-}
-/*# sourceMappingURL=components.css.map */
+.custom-line{--color: attr(data-color, "currentColor");--size: attr(data-size, 1px);--spacing: attr(data-spacing, 1px);--dashSize: attr(data-dash-size, 1px);&.horizontal,&.vertical{background:var(--color);display:inline-block;border-radius:100px}&.horizontal{width:100%;height:var(--size);&.dotted{background:radial-gradient(calc(var(--size) / 2) calc(var(--size) / 2),var(--color) 100%,transparent) 0 0 / calc(var(--spacing) + var(--size)) 100%}&.dashed{background:repeating-linear-gradient(90deg,var(--color),var(--color) var(--dashSize),transparent var(--dashSize),transparent calc(var(--spacing) + var(--dashSize)))}}&.vertical{height:100%;width:var(--size);&.dotted{background:radial-gradient(calc(var(--size) / 2) calc(var(--size) / 2),var(--color) 100%,transparent) 0 0 / 100% calc(var(--spacing) + var(--size))}&.dashed{background:repeating-linear-gradient(0deg,var(--color),var(--color) var(--dashSize),transparent var(--dashSize),transparent calc(var(--spacing) + var(--dashSize)))}}}.accordion{display:grid}.accordion-item{display:grid;position:relative;.accordion-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;cursor:pointer;position:sticky;top:0;padding:20px 0;&.has-start-content{grid-template-columns:auto 1fr auto}}.accordion-header-content{display:grid}.accordion-toggle-icon{transition:all .3s ease;&.isOpen{transform:rotate(-90deg)}}.accordion-body{padding:10px 0 20px}}.flip-card{--cardZIndex: attr(data-zIndex);--flipSpeed: attr(data-flipSpeed, .5s);--frontRotate: attr(data-frontRotate);--backRotate: attr(data-backRotate);perspective:1000px;z-index:var(--cardZIndex);.flipper{height:100%;position:relative;width:100%;transform-style:preserve-3d}.front,.back{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;transition:var(--flipSpeed);height:100%;left:0;top:0;width:100%}.front{position:relative;transform:var(--frontRotate);z-index:2}.back{position:absolute;transform:var(--backRotate)}.is-flipped{.front{position:absolute}.back{position:relative}}}.hover-card{display:inline-block;transition:all .3s ease;.card-hover-layer{transition:all .1s ease;width:100%;height:100%;display:grid}}.typography{margin:0;padding:.5em 0 .4em;&.primary{color:var(--color-primary-500)}&.secondary{color:var(--color-secondary-500)}&.tertiary{color:var(--color-tertiary-500)}&.active{color:var(--color-active-500)}&.alert{color:var(--color-alert-500)}&.warning{color:var(--color-warning-500)}&.info{color:var(--color-info-500)}&.recommended-width{max-width:70ch}&.code-family{font-family:monospace}&.no-padding{padding:0}&.nowrap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&.nowrap-max-lines{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}&.nowrap-max-lines-2{-webkit-line-clamp:2;line-clamp:2}&.nowrap-max-lines-3{-webkit-line-clamp:3;line-clamp:3}&.nowrap-max-lines-4{-webkit-line-clamp:4;line-clamp:4}&.nowrap-max-lines-5{-webkit-line-clamp:5;line-clamp:5}&.hero{font-size:var(--text-hero, clamp(4rem, 10vw, 5.5rem));line-height:var(--tw-leading, var(--text-hero--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-hero--letter-spacing, -4px));font-weight:var(--tw-font-weight, var(--text-hero--font-weight, bolder))}&.header1{font-size:var(--text-header1, clamp(3rem, 8vw, 4rem));line-height:var(--tw-leading, var(--text-header1--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header1--letter-spacing, -3px));font-weight:var(--tw-font-weight, var(--text-header1--font-weight, bold))}&.header2{font-size:var(--text-header2, clamp(2rem, 6vw, 3rem));line-height:var(--tw-leading, var(--text-header2--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header2--letter-spacing, -2px));font-weight:var(--tw-font-weight, var(--text-header2--font-weight, bold))}&.header3{font-size:var(--text-header3, clamp(1.5rem, 4vw, 2rem));line-height:var(--tw-leading, var(--text-header3--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header3--letter-spacing, -1px));font-weight:var(--tw-font-weight, var(--text-header3--font-weight, bold))}&.header4{font-size:var(--text-header4, clamp(1.2rem, 3vw, 1.5rem));line-height:var(--tw-leading, var(--text-header4--line-height, 1.4));letter-spacing:var(--tw-tracking, var(--text-header4--letter-spacing, 0));font-weight:var(--tw-font-weight, var(--text-header4--font-weight, bold))}&.body{font-size:var(--text-body, 1rem);line-height:var(--tw-leading, var(--text-body--line-height, 1.6));letter-spacing:var(--tw-tracking, var(--text-body--letter-spacing, 0));font-weight:var(--tw-font-weight, var(--text-body--font-weight, regular))}&.label{font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6))}&.small{font-size:var(--text-small, .75rem);line-height:var(--tw-leading, var(--text-small--line-height, 1.6));font-weight:var(--tw-font-weight, var(--text-small--font-weight, regular))}&.bold{font-weight:700}&.regular{font-weight:400}&.light{font-weight:300}}.ripple{position:absolute;display:block;inset:0;overflow:hidden;border-radius:inherit;z-index:1;.ripple-effect{position:absolute;transform:translate(-50%,-50%);border-radius:50%;width:0;height:0;pointer-events:none;animation:ripple-effect infinite;opacity:.4}}@keyframes ripple-effect{to{width:300px;height:300px;opacity:0;filter:blur(5px)}}@layer components{.button{--button-blur: 2px;--color: var(--color-gray-800);--solid-background: var(--color-gray-900);--solid-text: var(--color-gray-50);--solid-hover-background: var(--color-gray-800);--solid-active-background: var(--color-gray-900);--flat-background: hsl(from var(--color-gray-100) h s l / 80%);--flat-hover-background: var(--color-gray-50);--flat-active-background: var(--color-gray-100);--outlined-hover-background: hsl(from var(--color-gray-100) h s l / 20%);--outlined-active-background: hsl(from var(--color-gray-100) h s l / 50%);--text-hover-background: hsl(from var(--color-gray-100) h s l / 20%);--text-active-background: hsl(from var(--color-gray-100) h s l / 50%);--shadow-color: hsl(from var(--color-gray-800) h s l / 20%);--focus-background: hsl(from var(--color-gray-100) h s l / 20%);display:flex;flex-direction:row;justify-content:center;align-items:center;padding:.625em 2.1875em;gap:.625em;width:auto;border-radius:.5em;font-weight:700;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));cursor:pointer;outline:none;transition:all .15s ease;user-select:none;&.icon{padding:.625em}&.full{width:100%}&.no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}&.size-small{font-size:var(--text-small, .75rem);line-height:var(--tw-leading, var(--text-small--line-height, 1.6));font-weight:var(--tw-font-weight, var(--text-small--font-weight, regular))}&.size-regular{font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6))}&.size-large{font-size:var(--text-body, 1rem);line-height:var(--tw-leading, var(--text-body--line-height, 1.6));letter-spacing:var(--tw-tracking, var(--text-body--letter-spacing, 0));font-weight:var(--tw-font-weight, var(--text-body--font-weight, regular))}&.radius-none{border-radius:0}&.radius-small{border-radius:.25em}&.radius-medium{border-radius:.5em}&.radius-large{border-radius:1em}&.radius-full{border-radius:100rem}&:not(:disabled){&:hover,&:active,&:focus-visible{backdrop-filter:blur(var(--button-blur))}&:hover{transform:scale(1.01);box-shadow:0 1.4em .5em -1em hsl(from var(--color-black) h s l / 20%),0 .7em 1em -.5em hsl(from var(--color-black) h s l / 20%)}&:active{transform:scale(.98);box-shadow:0 .3em .4em -.2em hsl(from var(--color-black) h s l / 20%),0 .2em .8em -.1em hsl(from var(--color-black) h s l / 20%)}}color:var(--color);.ripple-effect{background:var(--color)}&.solid{background:var(--solid-background);color:var(--solid-text);backdrop-filter:blur(var(--button-blur));.ripple-effect{background:var(--solid-text)}&:focus-visible{box-shadow:0 0 0 .3125em var(--shadow-color);background:var(--solid-background)}&:hover{background:var(--solid-hover-background)}&:active{background:var(--solid-active-background)}}&.flat{background:var(--flat-background);backdrop-filter:blur(var(--button-blur));&:hover{background:var(--flat-hover-background)}&:active{background:var(--flat-active-background)}}&.outlined{background:transparent;border:1px solid;&:hover{background:var(--outlined-hover-background)}&:active{background:var(--outlined-active-background)}}&.text{background:transparent;&:hover{background:var(--text-hover-background)}&:active{background:var(--text-active-background)}}&:focus-visible{box-shadow:0 0 0 .3125em var(--shadow-color);background:var(--focus-background)}&.primary{--color: var(--color-primary-500);--solid-background: var(--color-primary-500);--solid-text: var(--color-primary-50);--solid-hover-background: var(--color-primary-400);--solid-active-background: var(--color-primary-600);--flat-background: hsl(from var(--color-primary-100) h s l / 80%);--flat-hover-background: var(--color-primary-50);--flat-active-background: var(--color-primary-100);--outlined-hover-background: hsl(from var(--color-primary-100) h s l / 20%);--outlined-active-background: hsl(from var(--color-primary-100) h s l / 50%);--text-hover-background: hsl(from var(--color-primary-100) h s l / 20%);--text-active-background: hsl(from var(--color-primary-100) h s l / 50%);--shadow-color: hsl(from var(--color-primary-500) h s l / 20%);--focus-background: hsl(from var(--color-primary-100) h s l / 20%)}&.secondary{--color: var(--color-secondary-500);--solid-background: var(--color-secondary-500);--solid-text: var(--color-secondary-50);--solid-hover-background: var(--color-secondary-400);--solid-active-background: var(--color-secondary-600);--flat-background: hsl(from var(--color-secondary-100) h s l / 80%);--flat-hover-background: var(--color-secondary-50);--flat-active-background: var(--color-secondary-100);--outlined-hover-background: hsl(from var(--color-secondary-100) h s l / 20%);--outlined-active-background: hsl(from var(--color-secondary-100) h s l / 50%);--text-hover-background: hsl(from var(--color-secondary-100) h s l / 20%);--text-active-background: hsl(from var(--color-secondary-100) h s l / 50%);--shadow-color: hsl(from var(--color-secondary-500) h s l / 20%);--focus-background: hsl(from var(--color-secondary-100) h s l / 20%)}&.tertiary{--color: var(--color-tertiary-500);--solid-background: var(--color-tertiary-500);--solid-text: var(--color-tertiary-50);--solid-hover-background: var(--color-tertiary-400);--solid-active-background: var(--color-tertiary-600);--flat-background: hsl(from var(--color-tertiary-100) h s l / 80%);--flat-hover-background: var(--color-tertiary-50);--flat-active-background: var(--color-tertiary-100);--outlined-hover-background: hsl(from var(--color-tertiary-100) h s l / 20%);--outlined-active-background: hsl(from var(--color-tertiary-100) h s l / 50%);--text-hover-background: hsl(from var(--color-tertiary-100) h s l / 20%);--text-active-background: hsl(from var(--color-tertiary-100) h s l / 50%);--shadow-color: hsl(from var(--color-tertiary-500) h s l / 20%);--focus-background: hsl(from var(--color-tertiary-100) h s l / 20%)}&.active{--color: var(--color-active-500);--solid-background: var(--color-active-500);--solid-text: var(--color-active-50);--solid-hover-background: var(--color-active-400);--solid-active-background: var(--color-active-600);--flat-background: hsl(from var(--color-active-100) h s l / 80%);--flat-hover-background: var(--color-active-50);--flat-active-background: var(--color-active-100);--outlined-hover-background: hsl(from var(--color-active-100) h s l / 20%);--outlined-active-background: hsl(from var(--color-active-100) h s l / 50%);--text-hover-background: hsl(from var(--color-active-100) h s l / 20%);--text-active-background: hsl(from var(--color-active-100) h s l / 50%);--shadow-color: hsl(from var(--color-active-500) h s l / 20%);--focus-background: hsl(from var(--color-active-100) h s l / 20%)}&.warning{--color: var(--color-warning-500);--solid-background: var(--color-warning-500);--solid-text: var(--color-warning-50);--solid-hover-background: var(--color-warning-400);--solid-active-background: var(--color-warning-600);--flat-background: hsl(from var(--color-warning-100) h s l / 80%);--flat-hover-background: var(--color-warning-50);--flat-active-background: var(--color-warning-100);--outlined-hover-background: hsl(from var(--color-warning-100) h s l / 20%);--outlined-active-background: hsl(from var(--color-warning-100) h s l / 50%);--text-hover-background: hsl(from var(--color-warning-100) h s l / 20%);--text-active-background: hsl(from var(--color-warning-100) h s l / 50%);--shadow-color: hsl(from var(--color-warning-500) h s l / 20%);--focus-background: hsl(from var(--color-warning-100) h s l / 20%)}&.alert{--color: var(--color-alert-500);--solid-background: var(--color-alert-500);--solid-text: var(--color-alert-50);--solid-hover-background: var(--color-alert-400);--solid-active-background: var(--color-alert-600);--flat-background: hsl(from var(--color-alert-100) h s l / 80%);--flat-hover-background: var(--color-alert-50);--flat-active-background: var(--color-alert-100);--outlined-hover-background: hsl(from var(--color-alert-100) h s l / 20%);--outlined-active-background: hsl(from var(--color-alert-100) h s l / 50%);--text-hover-background: hsl(from var(--color-alert-100) h s l / 20%);--text-active-background: hsl(from var(--color-alert-100) h s l / 50%);--shadow-color: hsl(from var(--color-alert-500) h s l / 20%);--focus-background: hsl(from var(--color-alert-100) h s l / 20%)}&.info{--color: var(--color-info-500);--solid-background: var(--color-info-500);--solid-text: var(--color-info-50);--solid-hover-background: var(--color-info-400);--solid-active-background: var(--color-info-600);--flat-background: hsl(from var(--color-info-100) h s l / 80%);--flat-hover-background: var(--color-info-50);--flat-active-background: var(--color-info-100);--outlined-hover-background: hsl(from var(--color-info-100) h s l / 20%);--outlined-active-background: hsl(from var(--color-info-100) h s l / 50%);--text-hover-background: hsl(from var(--color-info-100) h s l / 20%);--text-active-background: hsl(from var(--color-info-100) h s l / 50%);--shadow-color: hsl(from var(--color-info-500) h s l / 20%);--focus-background: hsl(from var(--color-info-100) h s l / 20%)}&:disabled{color:var(--color-gray-200);pointer-events:none}&.solid:disabled{background:var(--color-gray-200);color:var(--color-gray-50)}&.flat:disabled{background:hsl(from var(--color-gray-50) h s l / 80%)}&.outlined:disabled,&.text:disabled{background:transparent}}}.cursor-overlay{position:fixed;top:0;left:0;width:100%;height:100%;cursor:none;pointer-events:none}.cursor{position:fixed;border-radius:50%;z-index:99999999;pointer-events:none;transform:translateZ(0);@media(any-pointer:coarse){display:none}&.outer-circle{margin-left:-15px;margin-top:-15px;width:30px;height:30px;border:2px solid var(--color-primary-500);box-sizing:border-box;z-index:99999999;opacity:.5;transition:all .08s ease-out,width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;&.cursor-hover{margin-left:-40px;margin-top:-40px;width:80px;height:80px;background-color:var(--color-primary-500);opacity:.3}&.cursor-text{margin-left:-2px;margin-top:-40px;width:4px;height:80px;background-color:var(--color-primary-500);opacity:.3}}&.inner-circle{margin-left:-3px;margin-top:-3px;width:6px;height:6px;z-index:99999999;background-color:var(--color-primary-500);transition:opacity .3s ease-in-out;opacity:1;&.cursor-hover{opacity:0}}}.checkbox{border-radius:40%;background:var(--color-background-paper);transition:all .3s ease;width:1em;height:1em;margin:2px;outline:1px solid;display:flex;position:relative;.checkbox-input{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:2}&.size-small{font-size:1em}&.size-regular{font-size:1.2em}&.size-large{font-size:1.4em}}.checkbox-fill{transition:all .2s ease-out;border-radius:inherit;margin:auto;width:0;height:0;overflow:hidden;position:relative;display:grid;place-content:center;place-items:center;.checkbox-icon{font-size:.7em;z-index:1;opacity:0;transition:opacity .3s ease}}.checkbox-container{--color: var(--color-gray-800);--color-icon: var(--color-gray-50);--color-hover: hsl(from var(--color-gray-800) h s l / 50%);display:grid;grid-auto-flow:column;grid-auto-columns:auto 1fr;align-items:center;gap:.5em;width:fit-content;.checkbox-label{cursor:pointer;user-select:none;width:100%}.checkbox{color:var(--color);&.is-checked{.checkbox-fill{width:100%;height:100%;background:var(--color);color:var(--color-icon)}.checkbox-icon{opacity:1}}}.checkbox:hover,&:has(.checkbox-label:hover) .checkbox{box-shadow:0 0 0 .3em var(--color-hover);.checkbox-fill{width:20%;height:20%;border-radius:20%;background:var(--color-hover);color:var(--color-icon)}&:is(.is-checked){.checkbox-fill{width:100%;height:100%;border-radius:inherit;background:var(--color)}}}.checkbox:focus,&:has(.checkbox-input:focus) .checkbox,&:has(.checkbox-label:focus) .checkbox{box-shadow:0 0 0 .3em var(--color-hover)}&.color-primary{--color: var(--color-primary-500);--color-icon: var(--color-primary-50);--color-hover: hsl(from var(--color-primary-500) h s l / 50%)}&.color-secondary{--color: var(--color-secondary-500);--color-icon: var(--color-secondary-50);--color-hover: hsl(from var(--color-secondary-500) h s l / 50%)}&.color-tertiary{--color: var(--color-tertiary-500);--color-icon: var(--color-tertiary-50);--color-hover: hsl(from var(--color-tertiary-500) h s l / 50%)}&.color-active{--color: var(--color-active-500);--color-icon: var(--color-active-50);--color-hover: hsl(from var(--color-active-500) h s l / 50%)}&.color-warning{--color: var(--color-warning-500);--color-icon: var(--color-warning-50);--color-hover: hsl(from var(--color-warning-500) h s l / 50%)}&.color-alert{--color: var(--color-alert-500);--color-icon: var(--color-alert-50);--color-hover: hsl(from var(--color-alert-500) h s l / 50%)}&.color-info{--color: var(--color-info-500);--color-icon: var(--color-info-50);--color-hover: hsl(from var(--color-info-500) h s l / 50%)}}.form-field{display:grid;grid-auto-columns:auto;gap:.5em;transition:all .2s ease;.field-content{display:grid;grid-template-columns:auto 1fr auto;align-items:center}.field-left-icon,.field-right-icon{font-size:1em}.field-left-icon{margin-right:1em}.field-right-icon{margin-left:1em}.field-message{display:grid;grid-auto-flow:column;gap:5px;align-items:center;justify-content:start}&.variant-content-border{.field-content{border:1px solid var(--color-border);border-radius:4px;padding:1em;background:var(--color-background)}}&.variant-content-line{.field-content{border-bottom:1px solid;padding:.5em 0}}&.variant-full-border{border:1px solid var(--color-border);border-radius:4px;padding:.5em 0;background:var(--color-background);.field-label,.field-content,.field-message{padding:0 1em}}&.variant-inline{grid-auto-flow:column;padding:.5em 0;align-items:center;.field-label{width:auto}}&.error{color:var(--color-alert-500);border-color:var(--color-alert-500)}&.focus{color:var(--color-info-500);border-color:var(--color-info-500)}&.error,&.focus{.field-left-icon,.field-right-icon,.field-children{color:var(--color-foreground);border-color:var(--color-foreground)}}.field-children>*{width:100%}}.modal{position:fixed;z-index:1001;pointer-events:none}.modal-content{background:var(--color-background-paper);pointer-events:initial;&.animation-fade-down{animation:fadeInDown .2s ease;&.modal-close{animation:fadeOutUp .2s ease;transform:translateY(-10px);opacity:0}}&.animation-bounce{animation:bounceIn .5s ease;&.modal-close{animation:bounceOut .5s ease;transform:scale3d(.3,.3,.3);opacity:0}}}.modal-backdrop{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1000;animation:backdropOpen .5s cubic-bezier(.215,.61,.355,1);&.backdrop-close{animation:backdropClose .5s cubic-bezier(.215,.61,.355,1);opacity:0;transform:translateY(-10px)}}@keyframes backdropOpen{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes backdropClose{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.action-modal{background:transparent;.modal-content{&.shake-animation{animation:headShake .6s linear}}}.action-modal-content{position:relative;.action-modal-body{box-shadow:0 0 10px -5px;border-radius:10px;overflow:hidden;display:grid}.action-modal-content{background:var(--color-background);padding:3em 4em 2em;display:grid;gap:1em}&.no-padding .action-modal-content{padding:2em 0 0}&:has(.action-modal-icon) .action-modal-content{padding-top:4em}&.back-card{&:before{content:"";position:absolute;width:90%;height:100%;top:8px;left:50%;transform:translate(-50%);z-index:-1;background:var(--color-primary-500);border-radius:10px;display:block;transition:top .3s cubic-bezier(.81,-.52,.42,2.5)}}.action-modal-icon{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--color-primary-500);color:var(--color-primary-50);padding:0;border-radius:50%;width:2em;height:2em;display:grid;place-content:center;transition:box-shadow .3s cubic-bezier(.81,-.52,.42,2.5);z-index:1;box-shadow:0 0 hsl(from var(--color-primary-500) h s l / 53%),0 0 hsl(from var(--color-primary-500) h s l / 40%),0 0 hsl(from var(--color-primary-500) h s l / 27%),0 0 hsl(from var(--color-primary-500) h s l / 14%)}.close-modal-button{width:1em;height:1em;border-radius:50%;cursor:pointer;background:var(--color-background);position:absolute;top:10px;right:5px;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));opacity:0;transition:opacity .3s ease;z-index:1}&.line-on-top{.action-modal-content{border-top:5px solid var(--color-primary-500)}}&:hover{.action-modal-icon{box-shadow:0 0 0 7px hsl(from var(--color-primary-500) h s l / 53%),0 0 0 14px hsl(from var(--color-primary-500) h s l / 40%),0 0 0 21px hsl(from var(--color-primary-500) h s l / 27%),0 0 0 28px hsl(from var(--color-primary-500) h s l / 14%)}.close-modal-button{opacity:1}&:before{top:15px}}}.aside-modal{color:var(--color-foreground);overflow:auto;height:100%;.aside-modal-content{padding:2em}.close-modal-button{border-radius:50%;cursor:pointer;display:grid;place-content:center;background:var(--color-background);border:4px solid var(--color-primary-500);position:absolute;padding:.5em}&.left{border-right:4px solid var(--color-primary-500);animation:slideIn-left .3s ease;&.modal-close{animation:slideOut-left .3s ease;transform:translate(-100%)}.close-modal-button{top:2em;left:100%;transform:translate(calc(-50% + 2px))}}&.right{border-left:4px solid var(--color-primary-500);animation:slideIn-right .3s ease;&.modal-close{animation:slideOut-right .3s ease;transform:translate(100%)}.close-modal-button{top:2em;right:100%;transform:translate(calc(50% - 2px))}}&.top{border-bottom:4px solid var(--color-primary-500);animation:slideIn-top .3s ease;&.modal-close{animation:slideOut-top .3s ease;transform:translateY(-100%)}.close-modal-button{bottom:0;right:2em;transform:translateY(calc(50% - 2px))}}&.bottom{border-top:4px solid var(--color-primary-500);animation:slideIn-bottom .3s ease;&.modal-close{animation:slideOut-bottom .3s ease;transform:translateY(100%)}.close-modal-button{top:0;right:2em;transform:translateY(calc(-50% + 2px))}}}.confirmation-modal{display:grid;max-width:450px;gap:1em;place-content:center;justify-items:center;text-align:center;.confirmation-modal-actions{display:grid;grid-auto-flow:column;justify-content:center;gap:1em}}.menu-modal{border-radius:.5em;border:1px solid var(--color-border);background:var(--color-background);box-shadow:0 0 25px var(--color-background-paper);user-select:none;position:relative;overflow-y:auto;.menu-content{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start;height:100%;position:relative;overflow-y:auto}.divider{margin:.4em 0;color:var(--color-border)}}.menu-label{background:var(--color-background);color:var(--color-foreground);font-weight:lighter;padding:.5em 1.2em;position:sticky;top:0;z-index:10;pointer-events:none}.menu-option{padding:.2em 1em;border-radius:.3em;transition:all .3s ease;cursor:pointer;display:flex;align-items:center;outline:0;margin:0 .2em;position:relative;.ripple-effect{background:hsl(from var(--color-foreground) h s l / 31%)}&:first-child{margin-top:5px}.option-icon{margin-right:.5em}.menu-checkbox{width:100%}&.is-disabled{opacity:.4;pointer-events:none;cursor:default}&:focus,&:hover{background:hsl(from var(--color-background-paper) h s l / 25%)}&.is-selected{background:var(--color-background-paper);&:focus,&:hover{background:hsl(from var(--color-background-paper) h s l / 75%)}}}.menu-group{position:relative;.menu-group-content{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start;position:relative}}.input-color{display:grid;grid-auto-flow:column;align-items:center;justify-content:start;gap:.5em;.input-color-value{margin-left:10px}.color-input{padding-right:1em;border-radius:inherit;width:100%;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));font-family:var(--font-main) sans-serif}}.input-color-box{background:#fff;border-radius:5px;border:2px solid;width:25px;height:25px;position:relative;cursor:pointer;&:before{content:"";position:absolute;border-radius:inherit;top:0;left:0;width:100%;height:100%;background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50% / 8px 8px;z-index:-1}}.input-color-selector{display:grid;gap:10px;background:var(--color-background);color:var(--color-foreground);padding:10px;border-radius:0 18px 18px;border:1px solid;box-shadow:0 5px 30px -5px var(--color-gray-900);.react-colorful__pointer{width:1em;height:1em;border-radius:50%}.react-colorful__hue-pointer,.react-colorful__alpha-pointer{width:8px;height:100%;border-radius:4px;border-width:2px}.color-input-container{display:grid;grid-template-columns:16px 1fr 16px;align-items:center;gap:10px;border:1px solid;border-radius:8px;padding:.5em;width:100%;max-width:200px}.color-input{padding:0;border-radius:inherit;background:var(--color-background);color:var(--color-foreground);width:100%;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));font-family:var(--font-main) sans-serif;letter-spacing:2px;text-align:center}}.grida{display:grid}.input-file-container{display:grid;gap:10px;.input-file--box{border:1px solid;border-radius:5px;position:relative;transition:all .3s ease;display:grid;grid-template-columns:32px 1fr;padding:10px;gap:10px;background:var(--color-secondary-500);color:var(--color-secondary-50);align-items:center;.input-file--box--icon{width:32px;height:32px;border-radius:5px;background:var(--color-primary-50);color:var(--color-primary-500);display:grid;place-content:center}input{position:absolute;top:0;left:0;width:100%;height:100%;cursor:copy;opacity:0}&:hover{background:var(--color-primary-50);color:var(--color-primary-500);.input-file--box--icon{background:var(--color-primary-500);color:var(--color-primary-50)}}}.input-file--files{max-height:280px;overflow-y:auto;border:1px solid;border-radius:5px;.input-file--files--content{display:grid}}.error{color:tomato}.total-info{font-size:1em;display:grid;grid-auto-flow:column;justify-content:end;align-items:center;gap:.5em;.total-info--delete{display:grid;place-content:center;height:100%;background:transparent;cursor:pointer;transition:all .3s ease;aspect-ratio:1 / 1;border-radius:50%;width:2em;font-size:.8em;&:hover{background:var(--color-primary-500);color:var(--color-primary-50)}}}}.input-file-card{display:grid;grid-template-columns:35px 1fr 35px;gap:1em;align-items:center;padding:10px;background:var(--color-background);&:not(:last-child){border-bottom:1px dashed}&:hover{.file-card--delete{color:var(--color-primary-500)}}.file-card--image{background:var(--color-primary-500);color:var(--color-primary-50);width:32px;height:32px;border-radius:5px;display:grid;place-content:center;border:1px solid}.file-card--data{display:grid;font-size:.7em;justify-content:start}.file-card--delete{border-radius:5px;display:grid;place-content:center;width:32px;height:32px;cursor:pointer;transition:all .3s ease;&:hover{background:var(--color-primary-500);color:var(--color-primary-50)}}}.radio{border-radius:50%;background:var(--color-background-paper);transition:all .3s ease;width:1em;height:1em;outline:2px solid;display:flex;position:relative;padding:2px;.radio-input{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:1}&.size-small{font-size:1em}&.size-regular{font-size:1.2em}&.size-large{font-size:1.4em}}.radio-fill{transition:all .2s ease-out;border-radius:inherit;margin:auto;width:0;height:0}.radio-container{--color: var(--color-gray-800);display:flex;align-items:center;gap:1em;width:fit-content;.radio-label{cursor:pointer;user-select:none}.radio{color:var(--color);&.is-checked{.radio-fill{width:100%;height:100%;background:var(--color)}}}.radio:hover,&:has(.radio-label:hover) .radio{box-shadow:0 0 0 .4em hsl(from var(--color) h s l / 50%);.radio-fill{width:20%;height:20%;background:hsl(from var(--color) h s l / 50%)}&:is(.is-checked){.radio-fill{width:80%;height:80%;background:var(--color)}}}&.color-primary{--color: var(--color-primary-500)}&.color-secondary{--color: var(--color-secondary-500)}&.color-tertiary{--color: var(--color-tertiary-500)}&.color-active{--color: var(--color-active-500)}&.color-warning{--color: var(--color-warning-500)}&.color-alert{--color: var(--color-alert-500)}&.color-info{--color: var(--color-info-500)}}.infinity-scroll{display:grid;place-content:start center;place-items:start center;.loading{width:100%;height:30px;display:grid;place-content:center;.loading--icon{animation:spin .5s linear infinite;font-size:20px}}.empty-message{font-size:.8em;text-align:center;color:#a6a6a6}}@keyframes spin{to{transform:rotate(360deg)}}.select{cursor:pointer;.icon-close{display:grid;place-content:center;align-self:center;border-radius:100%;cursor:pointer;font-size:.6em;padding:.5em;&:hover{background:hsl(from var(--color-foreground) h s l / 33%)}}.select-container{display:grid;grid-template-columns:1fr auto;gap:.5em;align-items:center;grid-auto-rows:auto;position:relative;cursor:pointer;user-select:none;&.three-columns{grid-template-columns:1fr auto auto}}.input-button{appearance:none;-webkit-appearance:none;-moz-appearance:none;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:grid;min-width:0;width:100%;border:0;margin:0;border-radius:0;background:transparent;color:currentColor;text-align:left;-webkit-tap-highlight-color:transparent;padding:0;grid-template-columns:1fr auto;&.placeholder{color:#919191}}.select-caret-icon{transition:transform .2s ease;&.is-select-open{transform:rotate(180deg)}}}.select-options-menu{.select-menu-content{gap:0;display:block;height:auto;overflow:initial}}.select-options{gap:0;display:grid;grid-template-rows:1fr;height:100%;overflow:auto;&.with-search-query{grid-template-rows:auto 1fr}.select-options-list-container{height:100%;overflow:auto}.select-options-list{display:grid;gap:.2em;padding:0;margin:0;list-style:none;align-content:start}}.select-options-header{background:var(--color-background);padding:2px 5px;border-bottom:1px solid var(--color-border);.input-search{outline:none;padding:.8em 5px;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));width:100%}}.input-slider{display:grid;grid-template-columns:1fr 50px;align-items:center;gap:10px;.slider{appearance:none;-webkit-appearance:none;-moz-appearance:none;display:grid;align-items:center;&:focus{outline:none}&::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:1em;background:var(--color-primary-500);box-shadow:0 0 0 0 var(--color-gray-500);margin-top:-8px;transition:all .3s ease;cursor:pointer}&::-webkit-slider-runnable-track{height:4px;border-radius:1em;background:hsl(from var(--color-primary-200) h s l / 50%);transition:all .3s ease}&:focus,&:hover{&::-webkit-slider-thumb{background:var(--color-primary-500);box-shadow:0 0 0 6px hsl(from var(--color-primary-500) h s l / 50%);cursor:grab}}&:active{&::-webkit-slider-thumb{box-shadow:0 0 0 12px hsl(from var(--color-primary-500) h s l / 31%);cursor:grabbing}}&:focus{&::-webkit-slider-runnable-track{background:var(--color-primary-300)}}}&:has(.slider-number:focus) .slider::-webkit-slider-thumb,&:has(.slider-number:hover) .slider::-webkit-slider-thumb{background:var(--color-primary-500);box-shadow:0 0 0 6px hsl(from var(--color-primary-500) h s l / 31%)}.slider-number{transition:all .3s ease;border:1px solid;border-radius:5px;text-align:center;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;padding:4px 8px;font-weight:700;color:inherit;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}}&.is-focus{.slider-number{color:var(--color-primary-500)}}}.textarea{border:0;outline:0;field-sizing:content}.tooltip{color:var(--color-foreground);font-size:var(--text-small, .75rem);line-height:var(--tw-leading, var(--text-small--line-height, 1.6));font-weight:var(--tw-font-weight, var(--text-small--font-weight, regular));line-height:1em;border-radius:5px;padding:.5em 1em;display:block;border:1px solid;pointer-events:none;&:before{content:"";display:block;background:var(--color-background-paper);position:absolute;z-index:1;width:10px;height:10px;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid var(--color-foreground);border-bottom:1px solid var(--color-foreground);border-radius:0 0 3px}&.left{animation:fadeInRight .25s ease-out;&.close-animation{animation:fadeOutLeft .25s ease-out;transform:translate(-10px);opacity:0}&:before{top:50%;left:100%;transform:translate(-50%,-50%) rotate(-45deg)}}&.right{animation:fadeInLeft .25s ease-out;&.close-animation{animation:fadeOutRight .25s ease-out;transform:translate(10px);opacity:0}&:before{top:50%;right:100%;transform:translate(50%,-50%) rotate(135deg)}}&.top{animation:fadeInDown .25s ease-out;&.close-animation{animation:fadeOutUp .25s ease-out;transform:translateY(-10px);opacity:0}&:before{top:100%;left:50%;transform:translate(-50%,-50%) rotate(45deg)}}&.bottom{animation:fadeInUp .25s ease-out;&.close-animation{animation:fadeOutDown .25s ease-out;transform:translateY(10px);opacity:0}&:before{left:50%;bottom:100%;transform:translate(-50%,50%) rotate(-135deg)}}}.switch-container{--width: attr(data-width);--dot-size: attr(data-dot-size);--dot-hover-size: attr(data-dot-hover-size);--padding: attr(data-padding);--color: var(--color-gray-500);--color-dark: var(--color-gray-800);--color-contrast: var(--color-gray-50);display:flex;align-items:center;gap:.5em;width:fit-content;.switch{width:calc(var(--width) + var(--padding) * 2);border-radius:100em;background:var(--color-background-paper);padding:var(--padding);transition:all .3s ease;position:relative;.switch-dot{width:var(--dot-size);height:var(--dot-size);border-radius:100em;background:var(--color);display:block;transition:all .3s ease;margin-left:0;position:relative;z-index:1}.switch-icon{cursor:pointer;display:block}.switch-internal-left-icon,.switch-internal-right-icon{width:var(--dot-size);height:var(--dot-size);position:absolute;top:var(--padding);display:grid;place-content:center;color:var(--color-contrast);transition:all .3s ease}.switch-internal-left-icon{left:var(--padding)}.switch-internal-right-icon{right:var(--padding)}&.is-checked{background:var(--color);.switch-dot{margin-left:calc(var(--width) - var(--dot-size));background:var(--color);@supports (color: color-mix(in lab,red,red)){background:color-mix(in hsl,var(--color),var(--color-contrast) 75%)}}}&:not(.is-readonly):has(input:disabled){background:var(--color-background-disabled);.switch-dot{background:var(--color-foreground-disabled)}.switch-internal-left-icon,.switch-internal-right-icon{color:var(--color-foreground-disabled)}&.is-checked{background:var(--color-dark)}}.switch-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:3}}.switch-label{cursor:pointer;user-select:none;padding:0 .5em}.switch:not(:has(.is-readonly,input:disabled)):hover .switch-dot,&:has(.switch-icon:hover) .switch:not(:has(.is-readonly,input:disabled)) .switch-dot,&:has(.switch-label:hover) .switch:not(:has(.is-readonly,input:disabled)) .switch-dot{box-shadow:0 0 0 calc(.3 * var(--dot-size)) var(--color);@supports (color: color-mix(in lab,red,red)){box-shadow:0 0 0 calc(.3 * var(--dot-size)) color-mix(in hsl,var(--color) 50%,var(--color-contrast))}}.switch:not(:has(.is-readonly,input:disabled)):active .switch-dot,&:has(.switch-icon:active) .switch:not(:has(.is-readonly,input:disabled)) .switch-dot,&:has(.switch-label:active) .switch:not(:has(.is-readonly,input:disabled)) .switch-dot{width:var(--dot-hover-size)}.switch:not(:has(.is-readonly,input:disabled)).is-checked:active .switch-dot,&:has(.switch-icon:active) .switch:not(:has(.is-readonly,input:disabled)).is-checked .switch-dot,&:has(.switch-label:active) .switch:not(:has(.is-readonly,input:disabled)).is-checked .switch-dot{margin-left:calc(var(--width) - var(--dot-hover-size))}&.color-primary{--color: var(--color-primary-500);--color-dark: var(--color-primary-700);--color-contrast: var(--color-primary-50)}&.color-secondary{--color: var(--color-secondary-500);--color-dark: var(--color-secondary-700);--color-contrast: var(--color-secondary-50)}&.color-tertiary{--color: var(--color-tertiary-500);--color-dark: var(--color-tertiary-700);--color-contrast: var(--color-tertiary-50)}&.color-active{--color: var(--color-active-500);--color-dark: var(--color-active-700);--color-contrast: var(--color-active-50)}&.color-warning{--color: var(--color-warning-500);--color-dark: var(--color-warning-700);--color-contrast: var(--color-warning-50)}&.color-alert{--color: var(--color-alert-500);--color-dark: var(--color-alert-700);--color-contrast: var(--color-alert-50)}&.color-info{--color: var(--color-info-500);--color-dark: var(--color-info-700);--color-contrast: var(--color-info-50)}}.smart-table-container{border:0 solid var(--color-primary-500);border-radius:5px;overflow:auto;height:100%;width:100%;margin:auto}.smart-table{border-collapse:collapse;position:relative;width:100%;&.layout-fixed{table-layout:fixed}&.layout-scrollable{table-layout:auto}thead{position:sticky;z-index:10;top:0;box-shadow:0 3px 5px #0003,0 1px 10px #0000001f;tr{background:var(--color-primary-500);color:var(--color-primary-50);transition:all .3s ease}}tbody{tr{box-shadow:inset 0 0 0 0 var(--color-primary-500);transition:box-shadow .3s ease;&.row-selected,&:hover{background:var(--color-background-paper)}&.row-selected{box-shadow:inset 10px 0 0 -5px var(--color-primary-500)}&:not(:last-child){border-bottom:1px solid var(--color-border)}}}th{padding:.8em 1.2em;user-select:none;&.sort-on-click{cursor:pointer}.sort-icon{width:1em;display:block}svg{animation:fadeIn .3s ease}path{transition:all .3s ease}&:first-child{padding-left:2em}&:last-child{padding-right:2em}}td{transition:all .3s ease;padding:.6em 1em;&:first-child{padding-left:2em}&:last-child{padding-right:2em}}}.tab{cursor:pointer;user-select:none;transition:all .3s ease}.tab-list{--color: var(--color-gray-900);--color-contrast: var(--color-gray-50);--inner-radius: 0;--outer-radius: 0;display:grid;grid-auto-flow:column;gap:1em;align-items:center;position:relative;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));border-radius:var(--outer-radius);.tab,.tabs-selector{border-radius:var(--inner-radius)}&.size-small{font-size:var(--text-small, .75rem);line-height:var(--tw-leading, var(--text-small--line-height, 1.6));font-weight:var(--tw-font-weight, var(--text-small--font-weight, regular))}&.size-medium{font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6))}&.size-large{font-size:var(--text-body, 1rem);line-height:var(--tw-leading, var(--text-body--line-height, 1.6));letter-spacing:var(--tw-tracking, var(--text-body--letter-spacing, 0));font-weight:var(--tw-font-weight, var(--text-body--font-weight, regular))}.tabs-selector{position:absolute;background:var(--color);color:var(--color-contrast);border-radius:1.5em;&.active{transition:all .3s ease}}.tab{border-radius:1.5em;padding:.5em 1em;z-index:1;text-align:center;&.is-open{color:var(--color-contrast)}&:not(.is-open):hover{color:var(--color-gray-900)}}&.radius-none{--outer-radius: 0;--inner-radius: 0}&.radius-small{--outer-radius: .5em;--inner-radius: .5em}&.radius-medium{--outer-radius: 1em;--inner-radius: .8em}&.radius-large{--outer-radius: 1.5em;--inner-radius: 1.3em}&.radius-full{--outer-radius: 1.8em;--inner-radius: 1.6em}&.vertical-direction{grid-auto-flow:row;align-items:unset;align-content:start}&.variant-solid{background:var(--color-background-paper);color:var(--color-foreground);padding:.5em}&.variant-ghost{border:1px solid var(--color);padding:.5em}&.variant-line{border-radius:0;&:not(.vertical-direction){border-bottom:2px solid var(--color-border)}.tabs-selector{border-radius:0}.tab{border-radius:0;&.is-open{color:var(--color)}}}&.color-primary{--color: var(--color-primary-500);--color-contrast: var(--color-primary-50)}&.color-secondary{--color: var(--color-secondary-500);--color-contrast: var(--color-secondary-50)}&.color-tertiary{--color: var(--color-tertiary-500);--color-contrast: var(--color-tertiary-50)}&.color-active{--color: var(--color-active-500);--color-contrast: var(--color-active-50)}&.color-warning{--color: var(--color-warning-500);--color-contrast: var(--color-warning-50)}&.color-alert{--color: var(--color-alert-500);--color-contrast: var(--color-alert-50)}&.color-info{--color: var(--color-info-500);--color-contrast: var(--color-info-50)}}.tag{--background: attr(data-background, var(--color-primary-500));--text: attr(data-text, var(--color-primary-50));--background-selected: attr(data-background-selected, var(--color-primary-700));--text-selected: attr(data-text-selected, var(--color-primary-50));padding:.4em .8em;border-radius:.3em;border:1px solid;background:var(--background);color:var(--text);transition:all .3s ease;display:inline-block;font-size:var(--text-label, .875rem);line-height:var(--tw-leading, var(--text-label--line-height, 1.6));user-select:none;&.no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}&.rounded-none{border-radius:0}&.rounded-small{border-radius:.25em}&.rounded-medium{border-radius:.5em}&.rounded-large{border-radius:1em}&.rounded-full{border-radius:100rem}&:hover,&.is-selected{background:var(--background-selected);color:var(--text-selected)}}
+/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */