@stack-spot/citric-react 0.1.0

package/dist/citric.css

@@ -0,0 +1,2580 @@
+[data-theme] {
+  font: var(--font-body2);
+
+  .text-body1 {
+    margin: 0;
+    font: var(--font-body1);
+  }
+  
+  .text-body2 {
+    margin: 0;
+    font: var(--font-body2);
+  }
+  
+  .text-code1 {
+    font: var(--font-code1);
+  }
+  
+  .text-code2 {
+    font: var(--font-code2);
+  }
+  
+  .text-display1 {
+    margin: 0;
+    font: var(--font-display1);
+    letter-spacing: -0.1rem;
+  }
+
+  .text-h1 {
+    margin: 0;
+    font: var(--font-h1);
+  }
+
+  .text-h2 {
+    margin: 0;
+    font: var(--font-h2);
+  }
+
+  .text-h3 {
+    font: var(--font-h3);
+  }
+
+  .text-h4 {
+    margin: 0;
+    font: var(--font-h4);
+  }
+
+  .text-h5 {
+    margin: 0;
+    font: var(--font-h5);
+  }
+
+  .text-h6 {
+    margin: 0;
+    font: var(--font-h6);
+  }
+
+  .text-microtext1 {
+    margin: 0;
+    font: var(--font-microtext1);
+  }
+
+  .text-subtitle1 {
+    margin: 0;
+    font: var(--font-subtitle1);
+  }
+
+  .text-subtitle2 {
+    margin: 0;
+    font: var(--font-subtitle2);
+  }
+
+  .text-subtitle3 {
+    margin: 0;
+    font: var(--font-subtitle3);
+  }
+
+  .text-subtitle4 {
+    margin: 0;
+    font: var(--font-subtitle4);
+  }
+
+  .text-overheader1 {
+    margin: 0;
+    font: var(--font-overheader1);
+    text-transform: uppercase;
+  }
+
+  .text-overheader2 {
+    margin: 0;
+    font: var(--font-overheader2);
+    text-transform: uppercase;
+  }
+
+  .text-with-margins {
+    margin: revert;
+  }
+  
+  .apply-citric {
+    h1 {
+      font: var(--font-h1);
+    }
+    
+    h2 {
+      font: var(--font-h2);
+    }
+    
+    h3 {
+      font: var(--font-h3);
+    }
+    
+    h4 {
+      font: var(--font-h4);
+    }
+
+    h5 {
+      font: var(--font-h5);
+    }
+
+    h6 {
+      font: var(--font-h6);
+    }
+
+    small {
+      font: var(--font-microtext1);
+    }
+
+    pre {
+      font: var(--font-code2);
+    }
+  }
+}
+
+
+[data-theme] {
+  .row {
+    display: flex;
+    align-items: center;
+    &.no-center {
+      align-items: start;
+    }
+  }
+
+  .column {
+    display: flex;
+    flex-direction: column;
+    &.center {
+      align-items: center;
+    }
+  }
+
+  .center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &::-webkit-scrollbar-track, ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+  
+  &::-webkit-scrollbar, ::-webkit-scrollbar {
+    width: 0.25rem;
+    height: 0.5rem;
+    background-color: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb {
+    background-color: var(--light-600);
+  }
+}
+
+
+[data-theme] {
+  color: var(--light-contrastText);
+  
+  [data-color-scheme="primary"] {
+    --scheme-700: var(--primary-700);
+    --scheme-600: var(--primary-600);
+    --scheme-500: var(--primary-500);
+    --scheme-400: var(--primary-400);
+    --scheme-300: var(--primary-300);
+    --scheme-contrastText: var(--primary-contrastText);
+  }
+
+  [data-color-scheme="secondary"] {
+    --scheme-700: var(--secondary-700);
+    --scheme-600: var(--secondary-600);
+    --scheme-500: var(--secondary-500);
+    --scheme-400: var(--secondary-400);
+    --scheme-300: var(--secondary-300);
+    --scheme-contrastText: var(--secondary-contrastText);
+  }
+
+  [data-color-scheme="tertiary"] {
+    --scheme-700: var(--tertiary-700);
+    --scheme-600: var(--tertiary-600);
+    --scheme-500: var(--tertiary-500);
+    --scheme-400: var(--tertiary-400);
+    --scheme-300: var(--tertiary-300);
+    --scheme-contrastText: var(--tertiary-contrastText);
+  }
+
+  [data-color-scheme="success"] {
+    --scheme-700: var(--success-700);
+    --scheme-600: var(--success-600);
+    --scheme-500: var(--success-500);
+    --scheme-400: var(--success-400);
+    --scheme-300: var(--success-300);
+    --scheme-contrastText: var(--success-contrastText);
+  }
+
+  [data-color-scheme="warning"] {
+    --scheme-700: var(--warning-700);
+    --scheme-600: var(--warning-600);
+    --scheme-500: var(--warning-500);
+    --scheme-400: var(--warning-400);
+    --scheme-300: var(--warning-300);
+    --scheme-contrastText: var(--warning-contrastText);
+  }
+
+  [data-color-scheme="danger"] {
+    --scheme-700: var(--danger-700);
+    --scheme-600: var(--danger-600);
+    --scheme-500: var(--danger-500);
+    --scheme-400: var(--danger-400);
+    --scheme-300: var(--danger-300);
+    --scheme-contrastText: var(--danger-contrastText);
+  }
+
+  [data-color-scheme="light"] {
+    --scheme-700: var(--light-700);
+    --scheme-600: var(--light-600);
+    --scheme-500: var(--light-500);
+    --scheme-400: var(--light-400);
+    --scheme-300: var(--light-300);
+    --scheme-contrastText: var(--light-contrastText);
+  }
+
+  [data-color-scheme="inverse"] {
+    --scheme-700: var(--inverse-700);
+    --scheme-600: var(--inverse-600);
+    --scheme-500: var(--inverse-500);
+    --scheme-400: var(--inverse-400);
+    --scheme-300: var(--inverse-300);
+    --scheme-contrastText: var(--inverse-contrastText);
+  }
+
+  [data-color-scheme="highlight"] {
+    --scheme-700: var(--highlight-700);
+    --scheme-600: var(--highlight-600);
+    --scheme-500: var(--highlight-500);
+    --scheme-400: var(--highlight-400);
+    --scheme-300: var(--highlight-300);
+    --scheme-contrastText: var(--highlight-contrastText);
+  }
+}
+
+
+[data-theme] {
+  [data-color-palette="blue"] {
+    --palette-50: var(--blue-50);
+    --palette-100: var(--blue-100);
+    --palette-200: var(--blue-200);
+    --palette-300: var(--blue-300);
+    --palette-400: var(--blue-400);
+    --palette-500: var(--blue-500);
+    --palette-600: var(--blue-600);
+    --palette-700: var(--blue-700);
+    --palette-800: var(--blue-800);
+    --palette-900: var(--blue-900);
+  }
+
+  [data-color-palette="cyan"] {
+    --palette-50: var(--cyan-50);
+    --palette-100: var(--cyan-100);
+    --palette-200: var(--cyan-200);
+    --palette-300: var(--cyan-300);
+    --palette-400: var(--cyan-400);
+    --palette-500: var(--cyan-500);
+    --palette-600: var(--cyan-600);
+    --palette-700: var(--cyan-700);
+    --palette-800: var(--cyan-800);
+    --palette-900: var(--cyan-900);
+  }
+
+  [data-color-palette="indigo"] {
+    --palette-50: var(--indigo-50);
+    --palette-100: var(--indigo-100);
+    --palette-200: var(--indigo-200);
+    --palette-300: var(--indigo-300);
+    --palette-400: var(--indigo-400);
+    --palette-500: var(--indigo-500);
+    --palette-600: var(--indigo-600);
+    --palette-700: var(--indigo-700);
+    --palette-800: var(--indigo-800);
+    --palette-900: var(--indigo-900);
+  }
+
+  [data-color-palette="moss"] {
+    --palette-50: var(--moss-50);
+    --palette-100: var(--moss-100);
+    --palette-200: var(--moss-200);
+    --palette-300: var(--moss-300);
+    --palette-400: var(--moss-400);
+    --palette-500: var(--moss-500);
+    --palette-600: var(--moss-600);
+    --palette-700: var(--moss-700);
+    --palette-800: var(--moss-800);
+    --palette-900: var(--moss-900);
+  }
+
+  [data-color-palette="orange"] {
+    --palette-50: var(--orange-50);
+    --palette-100: var(--orange-100);
+    --palette-200: var(--orange-200);
+    --palette-300: var(--orange-300);
+    --palette-400: var(--orange-400);
+    --palette-500: var(--orange-500);
+    --palette-600: var(--orange-600);
+    --palette-700: var(--orange-700);
+    --palette-800: var(--orange-800);
+    --palette-900: var(--orange-900);
+  }
+
+  [data-color-palette="pink"] {
+    --palette-50: var(--pink-50);
+    --palette-100: var(--pink-100);
+    --palette-200: var(--pink-200);
+    --palette-300: var(--pink-300);
+    --palette-400: var(--pink-400);
+    --palette-500: var(--pink-500);
+    --palette-600: var(--pink-600);
+    --palette-700: var(--pink-700);
+    --palette-800: var(--pink-800);
+    --palette-900: var(--pink-900);
+  }
+
+  [data-color-palette="red"] {
+    --palette-50: var(--red-50);
+    --palette-100: var(--red-100);
+    --palette-200: var(--red-200);
+    --palette-300: var(--red-300);
+    --palette-400: var(--red-400);
+    --palette-500: var(--red-500);
+    --palette-600: var(--red-600);
+    --palette-700: var(--red-700);
+    --palette-800: var(--red-800);
+    --palette-900: var(--red-900);
+  }
+
+  [data-color-palette="yellow"] {
+    --palette-50: var(--yellow-50);
+    --palette-100: var(--yellow-100);
+    --palette-200: var(--yellow-200);
+    --palette-300: var(--yellow-300);
+    --palette-400: var(--yellow-400);
+    --palette-500: var(--yellow-500);
+    --palette-600: var(--yellow-600);
+    --palette-700: var(--yellow-700);
+    --palette-800: var(--yellow-800);
+    --palette-900: var(--yellow-900);
+  }
+
+  [data-color-palette="gray"] {
+    --palette-50: var(--gray-50);
+    --palette-100: var(--gray-100);
+    --palette-200: var(--gray-200);
+    --palette-300: var(--gray-300);
+    --palette-400: var(--gray-400);
+    --palette-500: var(--gray-500);
+    --palette-600: var(--gray-600);
+    --palette-700: var(--gray-700);
+    --palette-800: var(--gray-800);
+    --palette-900: var(--gray-900);
+  }
+
+  [data-color-palette="teal"] {
+    --palette-50: var(--teal-50);
+    --palette-100: var(--teal-100);
+    --palette-200: var(--teal-200);
+    --palette-300: var(--teal-300);
+    --palette-400: var(--teal-400);
+    --palette-500: var(--teal-500);
+    --palette-600: var(--teal-600);
+    --palette-700: var(--teal-700);
+    --palette-800: var(--teal-800);
+    --palette-900: var(--teal-900);
+  }
+
+  [data-color-palette="purple"] {
+    --palette-50: var(--purple-50);
+    --palette-100: var(--purple-100);
+    --palette-200: var(--purple-200);
+    --palette-300: var(--purple-300);
+    --palette-400: var(--purple-400);
+    --palette-500: var(--purple-500);
+    --palette-600: var(--purple-600);
+    --palette-700: var(--purple-700);
+    --palette-800: var(--purple-800);
+    --palette-900: var(--purple-900);
+  }
+}
+
+
+[data-citric="tooltip"] {
+  border-radius: var(--radius-xs);
+  background-color: var(--scheme-500, var(--palette-500, var(--inverse-500)));
+  color: var(--scheme-contrastText, var(--palette-900, var(--inverse-contrastText)));
+  display: flex;
+  gap: 6px;
+  font: var(--font-microtext1);
+  position: relative;
+  padding: 4px 8px;
+  align-items: center;
+
+  &.compact {
+    line-height: 1;
+    padding: 6px 8px;
+  }
+  
+
+  &.with-arrow:after {
+    position: absolute;
+    content: '';
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-width: 0 4px 2px 4px;
+    border-color: transparent transparent var(--scheme-500, var(--palette-500, var(--inverse-500))) transparent;
+  }
+  
+  &.with-arrow.left {
+    margin-right: 2px;
+    &:after {
+      transform: rotate(90deg);
+      top: 50%;
+      right: -5px;
+      margin-top: -1px;
+    }
+  }
+
+  &.with-arrow.right {
+    margin-left: 2px;
+    &:after {
+      transform: rotate(270deg);
+      top: 50%;
+      left: -5px;
+      margin-top: -1px;
+    }
+  }
+
+  &.with-arrow.top {
+    margin-bottom: 2px;
+    &:after {
+      transform: rotate(180deg);
+      bottom: -2px;
+      left: 50%;
+      margin-left: -4px;
+    }
+  }
+
+  &.with-arrow.bottom {
+    margin-top: 2px;
+    &:after {
+      top: -2px;
+      left: 50%;
+      margin-left: -4px;
+    }
+  }
+}
+
+[data-citric="tabs"] {
+  > nav {
+    display: flex;
+    border-bottom: 1px solid var(--light-600);
+    > label {
+      appearance: none;
+      margin: 0;
+      padding: 8px 32px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background-color: transparent;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      &:has(input[type="radio"]:disabled) {
+        cursor: auto;
+      }
+      input[type="radio"] {
+        appearance: none;
+        position: absolute;
+        bottom: -1px;
+        left: 0;
+        right: 0;
+        display: block;
+        height: 2px;
+        background-color: var(--scheme-500, var(--palette-500, var(--primary-500)));
+        transform: scaleX(0);
+        transition: transform 0.2s ease-out;
+        &:checked {
+          transform: scaleX(1);
+        }
+      }
+    }
+  }
+
+  > section {
+    margin-top: 16px;
+  }
+
+  &.stepper {
+    > nav {
+      border: none;
+      gap: 16px;
+      font-weight: 500;
+      > label {
+        flex: 1;
+        padding: 20px 0 0 0;
+        color: var(--light-700);
+        &:has(input[type="radio"]:checked) {
+          color: var(--light-contrastText);
+          & ~ label input[type="radio"] {
+            background-color: var(--light-600);
+          }
+        }
+        input[type="radio"] {
+          top: 0;
+          bottom: auto;
+          height: 4px;
+          background-color: var(--success-500);
+          transform: none;
+          transition: background-color 0.3s;
+          margin: 0;
+          &:checked {
+            background-color: var(--scheme-500, var(--palette-500, var(--primary-500)));
+          }
+        }
+      }
+    }
+  }
+}
+
+.apply-citric table,
+[data-citric="table"] {
+  --radius: 4px;
+  --border: 1px solid var(--light-600);
+  border-collapse: separate;
+  border-spacing: 0 8px;
+  border-radius: var(--radius);
+  width: 100%;
+  box-sizing: border-box;
+
+  td, th {
+    padding: 10px;
+  }
+
+  td {
+    background-color: var(--light-400);
+    &:first-child {
+      border-top-left-radius: var(--radius);
+      border-bottom-left-radius: var(--radius);
+    }
+    &:last-child {
+      border-top-right-radius: var(--radius);
+      border-bottom-right-radius: var(--radius);
+    }
+  }
+
+  th {
+    font: var(--font-body2);
+    color: var(--light-700);
+    text-align: left;
+  }
+
+  tr.clickable {
+    td, th {
+      cursor: pointer;
+    }
+  }
+
+  &.stripped, &[data-appearance="stripped"] {
+    tr:nth-child(odd) td {
+      background-color: var(--light-400);
+    }
+    tr:nth-child(even) td, th {
+      background-color: var(--light-300);
+    }
+  }
+
+  &.compressed, &[data-appearance="stripped"] {
+    border-spacing: 0 0;
+  }
+
+  &.bordered, &[data-appearance="stripped"]:not(.borderless) {
+    border: var(--border);
+  }
+
+  &.borderless-header th, &[data-appearance="stripped"] th {
+    border: none !important;
+  }
+
+  &.bordered-rows td {
+    border-top: var(--border);
+    border-bottom: var(--border);
+    &:first-child {
+      border-left: var(--border);
+    }
+    &:last-child {
+      border-right: var(--border);
+    }
+  }
+
+  th {
+    border-top: var(--border);
+    border-bottom: var(--border);
+    &:first-child {
+      border-left: var(--border);
+      border-top-left-radius: var(--radius);
+      border-bottom-left-radius: var(--radius);
+    }
+    &:last-child {
+      border-right: var(--border);
+      border-top-right-radius: var(--radius);
+      border-bottom-right-radius: var(--radius);
+    }
+  }
+
+  &.square {
+    border-radius: 0;
+  }
+
+  &.square-rows td, &[data-appearance="stripped"] td {
+    border-radius: 0 !important;
+  }
+
+  &.uppercase-header th {
+    text-transform: uppercase;
+  }
+
+  th.sortable {
+    cursor: pointer;
+    &:after {
+      content: var(--citric-icon-outline-Select);
+      font-family: CitricIconsOutline;
+      font-size: 10px;
+      margin-left: 6px;
+    }
+    &.asc:after {
+      content: var(--citric-icon-fill-ChevronUpFill);
+      font-family: CitricIconsFill;
+    }
+    &.desc:after {
+      content: var(--citric-icon-fill-ChevronDownFill);
+      font-family: CitricIconsFill;
+    }
+  }
+
+  &.accordion-rows {
+    --animation-duration: 0.3s;
+
+    &:not(.compressed):not([data-appearance="stripped"]) {
+      border-spacing: 0 4px;
+
+      thead:after {
+        content: '';
+        display: table-row;
+      }
+
+      tr.accordion td {
+        position: relative;
+        top: -4px;
+      }
+    }
+
+    &.stripped, &[data-appearance="stripped"] {
+      tbody:nth-child(odd) td {
+        background-color: var(--light-400);
+      }
+      tbody:nth-child(even) td, th {
+        background-color: var(--light-300);
+      }
+    }
+
+    tr.accordion td {
+      padding: 0;
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-top: none;
+      > div {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.3s ease-out;
+        > div {
+          padding: 10px;
+        }
+      }
+    }
+
+    tr:not(.accordion) td:last-child input[aria-controls] {
+      --rotate: 0deg;
+      appearance: none;
+      width: 100%;
+      height: 100%;
+      cursor: pointer;
+      text-align: right;
+      margin: 0;
+      &:after {
+        content: var(--citric-icon-outline-ChevronDown);
+        font-family: CitricIconsOutline;
+        transition: transform var(--animation-duration) ease-out;
+        display: inline-block;
+      }
+      &:checked:after {
+        transform: rotate(180deg);
+      }
+    }
+
+    tr:has(td:last-child input[aria-controls]:checked) {
+      td {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+      + tr.accordion td > div {
+        max-height: var(--max-height, 200px);
+        overflow: auto;
+        animation: var(--animation-duration) table-delayed-overflow;
+      }
+    }
+
+    tr:has(td:last-child input[aria-controls]:not(:checked)) + tr.accordion td {
+      border: none;
+    }
+  }
+}
+
+@keyframes table-delayed-overflow {
+  0% {
+    overflow: hidden;
+  }
+  99% {
+    overflow: hidden;
+  }
+  100% {
+    overflow: auto;
+  }
+}
+
+
+[data-citric="switch"],
+[data-citric="switch-row"] input[type="checkbox"] {
+  background-color: var(--light-700);
+  border-radius: var(--radius-md);
+
+  cursor: pointer;
+  appearance: none;
+  position: relative;
+  width: 2.5rem;
+  height: 1.25rem;
+  box-sizing: border-box;
+
+  &:before {
+    content: '';
+    background-color: var(--scheme-contrastText, var(--success-contrastText));
+    transition: 0.32s;
+    position: absolute;
+    width: 0.75rem;
+    height: 0.75rem;
+    left: 0.25rem;
+    top: 0.25rem;
+    border-radius: var(--radius-lg);
+  }
+
+  &:checked {
+    background-color: var(--scheme-500, var(--success-500));
+
+    &::before {
+      transform: translateX(20px);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.24;
+    pointer-events: none;
+  }
+}
+
+[data-citric="switch-row"] {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+
+/**
+ * Percentage of the range that is currently selected.
+ * Should not include the "%" symbol.
+ * Should be in the interval [0, 100].
+ */
+@property --percent {
+  syntax: '<integer>';
+  inherits: true;
+  initial-value: 0;
+}
+
+.apply-citric input[type="range"],
+[data-citric="labeled-slider"] input[type="range"],
+input[type="range"][data-citric="slider"] {
+  --fg-color: var(--scheme-500, var(--palette-500, var(--primary-500)));
+  --bg-color: var(--scheme-300, var(--palette-50, var(--primary-300)));
+  --thumb-size: 16px;
+  --percent-value: calc(var(--percent) * 1%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  height: 32px;
+  position: relative;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    margin-top: -7px;
+    background-color: var(--fg-color);
+    border-radius: 50%;
+    border: none;
+    transition: box-shadow 0.3s;
+  }
+
+  &:hover::-webkit-slider-thumb {
+    box-shadow: 0 0 0 8px color-mix(in srgb, var(--fg-color) 8%, transparent);
+  }
+
+  &:focus {
+    outline: none;
+    &::-webkit-slider-thumb {
+      box-shadow: 0 0 0 8px color-mix(in srgb, var(--fg-color) 18%, transparent);
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, var(--fg-color) 0%, var(--fg-color) var(--percent-value), var(--bg-color) var(--percent-value), var(--bg-color) 100%);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  /* Repeating everything for Firefox because Safari bugs out with commas (,) */
+
+  &::-moz-range-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    margin-top: -7px;
+    background-color: var(--fg-color);
+    border-radius: 50%;
+    border: none;
+    transition: box-shadow 0.3s;
+  }
+
+  &:hover::-moz-range-thumb {
+    box-shadow: 0 0 0 8px color-mix(in srgb, var(--fg-color) 8%, transparent);
+  }
+
+  &:focus {
+    outline: none;
+    &::-webkit-slider-thumb {
+      box-shadow: 0 0 0 8px color-mix(in srgb, var(--fg-color) 18%, transparent);
+    }
+  }
+
+  &::-moz-range-track {
+    width: 100%;
+    height: 2px;
+    background: linear-gradient(90deg, var(--fg-color) 0%, var(--fg-color) var(--percent-value), var(--bg-color) var(--percent-value), var(--bg-color) 100%);
+  }
+}
+
+[data-citric="labeled-slider"] {
+  --percent-value: calc(var(--percent) * 1%);
+  margin-right: 54px;
+  position: relative;
+
+  input[type="range"] {
+    width: 100%;
+  }
+
+  .value {
+    position: absolute;
+    font: var(--font-microtext1);
+    color: var(--inverse-contrastText);
+    padding: 4px 8px;
+    border-radius: 4px;
+    background-color: var(--inverse-500);
+    top: 6px;
+    left: var(--percent-value);
+    margin-left: calc(9px + 16px * (1 - var(--percent) / 100));
+
+    &:before {
+      content: '';
+      position: absolute;
+      width: 0; 
+      height: 0;
+      top: 6px;
+      left: -4px;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent; 
+      border-right: 4px solid var(--inverse-500);
+    }
+  }
+
+  &.value-on-hover {
+    margin-right: 0;
+    &:before, .value {
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+    &:hover .value,
+    input:focus + .value {
+      opacity: 1;
+    }
+  }
+}
+
+
+[data-citric="skeleton"] {
+  --bg-from: var(--light-500);
+  --bg-to: var(--light-400);
+  width: 100%;
+  height: 2rem;
+  animation: skeleton-loading 1s linear infinite alternate;
+
+  &.circle {
+    border-radius: 50%;
+    width: 3.125rem;
+    height: 3.125rem;
+  }
+
+  &.bg-400 {
+    --bg-from: var(--light-400);
+    --bg-to: var(--light-300);
+  }
+
+  &.bg-600 {
+    --bg-from: var(--light-600);
+    --bg-to: var(--light-500);
+  }
+}
+
+@keyframes skeleton-loading {
+  from {
+    background-color: var(--bg-from);
+  }
+  to {
+    background-color: var(--bg-to);
+  }
+}
+
+
+/* Parts of the select css is in input.css. */
+
+[data-citric="select"] {
+  position: relative;
+  width: fit-content;
+  select {
+    appearance: none;
+    padding-right: 32px;
+    &:disabled {
+      opacity: 1;
+    }
+  }
+  &:before {
+    position: absolute;
+    right: 8px;
+    top: 9px;
+    font-family: CitricIconsOutline;
+    content: var(--citric-icon-outline-ChevronDown);
+    pointer-events: none;
+  }
+  .loader {
+    display: none;
+    position: absolute;
+    right: 28px;
+    top: 13px;
+  }
+  &[aria-busy="true"], &[aria-busy=""] {
+    select {
+      padding-right: 60px;
+      cursor: progress !important;
+    }
+    .loader {
+      display: block;
+      pointer-events: none;
+    }
+    [data-citric="progress-circular"] {
+      border-color: var(--light-400);
+    }
+  }
+}
+
+
+[data-citric="select-box"] {
+  position: relative;
+
+  > input {
+    appearance: none;
+    position: absolute;
+  }
+
+  > .option {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 12px;
+    box-sizing: border-box;
+    width: 160px;
+    height: 152px;
+    border-radius: 4px;
+    background-color: var(--light-300);
+    border: 2px solid transparent;
+    gap: 4px;
+    cursor: pointer;
+    transition: border 0.3s;
+
+    &:hover {
+      border-color: var(--light-500);
+    }
+
+    > .picture {
+      width: 48px;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    > .title {
+      font: var(--font-body1);
+      font-weight: 500;
+      margin: 0;
+    }
+
+    > .description {
+      margin: 0;
+    }
+  }
+
+  &.bg-400 .option {
+    background-color: var(--light-400);
+    &:hover {
+      border-color: var(--light-600);
+    }
+  }
+  &.bg-500 .option {
+    background-color: var(--light-500);
+    &:hover {
+      border-color: var(--light-600);
+    }
+  }
+  &.bg-600 .option {
+    background-color: var(--light-600);
+    &:hover {
+      border-color: var(--light-700);
+    }
+  }
+  &.bg-700 .option {
+    background-color: var(--light-700);
+    color: var(--inverse-contrastText);
+    &:hover {
+      border-color: var(--light-contrastText);
+    }
+  }
+
+  > input:checked + .option,
+  > input[checked] + .option {
+    border-color: var(--scheme-500, var(--palette-500, var(--primary-500))) !important;
+  }
+
+  > input:focus + .option {
+    border-color: var(--light-500);
+  }
+
+  > input:disabled + .option {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+/* Parts of the select css is in input.css. */
+
+[data-citric="rich-select"] {
+  --default-padding: 4px 8px;
+  --default-max-height: 300px;
+  --animation-duration: 0.3s;
+  position: relative;
+  width: fit-content;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  border: none;
+  select {
+    pointer-events: none;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 1px solid var(--border-color, var(--light-600));
+    border-radius: var(--radius-xs);
+    transition: border var(--animation-duration);
+  }
+  &.focused, &:has(:focus) {
+    &:after {
+      border: 2px solid var(--border-color, var(--scheme-500, var(--primary-500)));
+    }
+    .selection-panel:after {
+      border: 2px solid var(--border-color, var(--scheme-500, var(--primary-500)));
+      border-top: none;
+    }
+  }
+  &:has(:disabled) {
+    background-color: var(--light-500);
+    border-color: var(--light-600);
+    color: var(--light-700);
+    cursor: not-allowed;
+    [data-citric="progress-circular"] {
+      border-color: var(--light-400);
+    }
+  }
+  header {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    min-width: 80px;
+    justify-content: space-between;
+    &:after {
+      font-family: CitricIconsOutline;
+      content: var(--citric-icon-outline-ChevronDown);
+      pointer-events: none;
+      transition: transform var(--animation-duration) ease-in;
+    }
+  }
+  &:has(.search-bar) header {
+    min-width: 150px;
+  }
+  &.hide-arrow header:after {
+    content: none;
+  }
+  .loader {
+    display: none;
+  }
+  .selection-panel {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height var(--animation-duration) ease-in;
+    position: absolute;
+    top: calc(100% - 3px);
+    z-index: 1;
+    left: 0;
+    right: 0;
+    background-color: var(--light-300);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    border-bottom-left-radius: var(--radius-xs);
+    border-bottom-right-radius: var(--radius-xs);
+
+    .search-bar {
+      padding: var(--padding, var(--default-padding));
+      [data-citric="field-group"] {
+        width: unset;
+      }
+      input {
+        flex: 1;
+        width: 0;
+      }
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+      li {
+        padding: var(--padding, var(--default-padding));
+        display: flex;
+        transition: background-color 0.3s;
+        cursor: pointer;
+        &:not(:last-child) {
+          border-bottom: 1px solid var(--light-600);
+        }
+        &:hover, &.focused {
+          background-color: var(--light-500);
+        }
+        &.empty {
+          color: var(--light-700);
+          font-style: italic;
+        }
+      }
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      pointer-events: none;
+      border: 1px solid var(--border-color, var(--light-600));
+      border-top: none;
+      transition: border var(--animation-duration);
+    }
+  }
+
+  &[aria-busy="true"], &[aria-busy=""] {
+    cursor: progress !important;
+    .loader {
+      display: block;
+    }
+  }
+  &:not(.open) {
+    .selection-panel {
+      opacity: 0;
+      animation: var(--animation-duration) rich-select-delayed-opacity;
+    }
+  }
+  &.open {
+    header:after {
+      transform: rotate(180deg);
+    }
+    .selection-panel {
+      max-height: var(--max-height, var(--default-max-height));
+      opacity: 1;
+      ul {
+        overflow: auto;
+        animation: var(--animation-duration) rich-select-delayed-overflow;
+      }
+    }
+  }
+}
+
+@keyframes rich-select-delayed-overflow {
+  0% {
+    overflow: hidden;
+  }
+  99% {
+    overflow: hidden;
+  }
+  100% {
+    overflow: auto;
+  }
+}
+
+@keyframes rich-select-delayed-opacity {
+  0% {
+    opacity: 1;
+  }
+  99% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+
+[data-citric="rating"] {
+  --icon: var(--citric-icon-outline-Star);
+  --icon-fill: var(--citric-icon-fill-StarFill);
+  display: flex;
+  flex-direction: row-reverse;
+  width: fit-content;
+  font-size: 16px;
+  gap: 6px;
+
+  input[type="radio"] {
+    appearance: none;
+    cursor: pointer;
+    margin: 0;
+    &:before {
+      font-family: 'CitricIconsOutline';
+      color: var(--light-700);
+      content: var(--icon);
+    }
+    &:checked:before {
+      font-family: 'CitricIconsFill';
+      color: var(--yellow-500);
+      content: var(--icon-fill);
+    }
+    &:checked ~ input[type="radio"]:before {
+      font-family: 'CitricIconsFill';
+      color: var(--yellow-500);
+      content: var(--icon-fill);
+    }
+  }
+}
+
+
+.apply-citric input[type="radio"],
+[data-citric="radio-row"] input[type="radio"],
+[data-citric="radio"] {
+  /* General css */
+
+  appearance: none;
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+  position: relative;
+  background-color: var(--light-300);
+  border: 2px solid var(--light-contrastText);
+  border-radius: var(--radius-lg);
+  margin: 0;
+
+  /* States */
+
+  &:disabled {
+    opacity: 0.24;
+  }
+
+  &:checked {
+    border-color: var(--scheme-500, var(--inverse-500));
+  }
+
+  &:checked:after {
+    top: 2px;
+    left: 2px;
+    right: 2px;
+    bottom: 2px;
+    position: absolute;
+    background-color: var(--scheme-500, var(--inverse-500));
+    border-radius: var(--radius-lg);
+    content: '';
+    visibility: visible;
+  }
+}
+
+[data-citric="radio-row"] {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  line-height: 1;
+}
+
+
+/**
+ * Percentage of the progress.
+ * Should not include the "%" symbol.
+ * Should be in the interval [0, 100].
+ */
+@property --progress {
+  syntax: '<integer>';
+  inherits: true;
+  initial-value: 0;
+}
+
+[data-citric="progress-circular"] {
+  width: 32px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  box-sizing: border-box;
+  border: 4px solid var(--light-500);
+  position: relative;
+  transition: --progress 1s;
+
+  &.lg {
+    width: 46px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font: var(--font-microtext1);
+    &:not(.indeterminate):after {
+      counter-reset: count var(--progress);
+      content: counter(count)'%';
+    }
+  }
+
+  &.sm {
+    width: 22px;
+  }
+
+  &.xs {
+    width: 16px;
+  }
+
+  &.indeterminate {
+    animation: progress-indeterminate-rotation 1.5s infinite;
+  }
+
+  &:before {
+    --angle: calc(var(--progress) / 100 * 360deg);
+    content: '';
+    position: absolute;
+    top: -3px;
+    left: -3px;
+    bottom: -3px;
+    right: -3px;
+    border: 2px solid var(--scheme-500, var(--palette-500, var(--primary-500)));
+    border-radius: 50%;
+    mask-image: conic-gradient(white var(--angle), transparent var(--angle));
+  }
+}
+
+@keyframes progress-indeterminate-rotation {
+  0% {
+    --progress: 20;
+    transform: rotate(-36deg); /* 0 - progress / 100 * 180 */
+  }
+  50% {
+    --progress: 40;
+    transform: rotate(108deg); /* 180 - progress / 100 * 180 */
+  }
+  100% {
+    --progress: 20;
+    transform: rotate(324deg); /* 360 - progress / 100 * 180 */
+  }
+}
+
+
+[data-citric="progress-bar"] {
+  border-radius: var(--radius-lg);
+  width: 100%;
+  height: 2px;
+  padding: 1px;
+  background-color: var(--light-600);
+
+  &:after {
+    content: '';
+    display: block;
+    width: calc(var(--progress) * 1%);
+    height: 100%;
+    border-radius: var(--radius-lg);
+    background-color: var(--scheme-500, var(--palette-500, var(--primary-500)));
+  }
+
+  &.indeterminate:after {
+    animation: progress-indeterminate-bar 1s infinite;
+  }
+}
+
+@keyframes progress-indeterminate-bar {
+  0% {
+    margin-left: 0%;
+    width: 5px;
+  }
+  50% {
+    margin-left: 30%;
+    width: 40%;
+  }
+  100% {
+    margin-left: calc(100% - 5px);
+    width: 5px;
+  }
+}
+
+
+[data-citric="pagination"] {
+  border: 1px solid var(--light-600);
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+
+  > label {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  > .page-size, .page-number {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 8px;
+  }
+
+  select {
+    border: none;
+    background-color: transparent;
+    padding: 0;
+    height: auto;
+    outline: none;
+    color: var(--light-contrastText);
+    &:focus {
+      border: none;
+      box-shadow: none !important;
+    }
+  }
+
+  > .page-size {
+    flex: 1;
+    border-right: 1px solid var(--light-600);
+  }
+
+  .citric-icon {
+    background-color: transparent;
+  }
+}
+
+
+[data-citric="menu"] {
+  --bg: var(--light-300);
+  --hover-bg: var(--light-500);
+  --border: var(--light-500);
+  background-color: var(--bg);
+  border-radius: var(--radius-sm);
+  box-shadow: 4px 4px 48px #000;
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  overflow: clip;
+
+  &.square {
+    border-radius: 0;
+  }
+
+  &.bordered {
+    border: 2px solid var(--border);
+  }
+
+  &.no-shadow {
+    box-shadow: none;
+  }
+
+  &.spaced {
+    padding: 16px 8px;
+    gap: 8px;
+  }
+
+  &.bg-400 {
+    --bg: var(--light-400);
+    --hover-bg: var(--light-600);
+    --border: var(--light-600);
+  }
+
+  &.bg-500 {
+    --bg: var(--light-500);
+    --hover-bg: var(--light-600);
+    --border: var(--light-600);
+  }
+
+  &.bg-600 {
+    --bg: var(--light-600);
+    --hover-bg: var(--light-400);
+    --border: var(--light-400);
+  }
+
+  > header {
+    border-bottom: 2px solid var(--border);
+    padding-bottom: 16px;
+  }
+
+  .back-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
+    span {
+      font-size: 12px;
+    }
+  }
+
+  nav, section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &.spaced {
+    nav, section {
+      gap: 8px;
+    }
+  }
+
+  h6 {
+    margin: 0;
+    font: var(--font-h6);
+    font-size: 12px;
+    text-transform: uppercase;
+    color: var(--light-700);
+  }
+
+  hr {
+    width: 100%;
+    height: 2px;
+    background-color: var(--border);
+    border: none;
+  }
+
+  section:last-child hr {
+    display: none;
+  }
+}
+
+nav[data-citric="menu"], [data-citric="menu"] nav {
+  button, a {
+    padding: 0 8px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: background-color 0.2s;
+    text-decoration: none;
+    color: inherit;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+
+    &:hover, &:focus {
+      background-color: var(--hover-bg);
+    }
+
+    &:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &:after {
+      font-family: CitricIconsOutline;
+      flex: 1;
+      text-align: right;
+    }
+
+    &.submenu:after {
+      content: var(--citric-icon-outline-ChevronRight);
+    }
+
+    &.active:after {
+      content: var(--citric-icon-outline-Check);
+    }
+  }
+}
+
+nav[data-citric="menu"].rounded-items, [data-citric="menu"].rounded-items nav {
+  button, a {
+    border-radius: var(--radius-xs);
+  }
+}
+
+
+.apply-citric a, [data-citric="link"] {
+  cursor: pointer;
+  text-decoration: underline;
+  color: unset;
+}
+
+
+.apply-citric input[type="color"],
+.apply-citric input[type="date"],
+.apply-citric input[type="datetime-local"],
+.apply-citric input[type="email"],
+.apply-citric input[type="month"],
+.apply-citric input[type="number"],
+.apply-citric input[type="password"],
+.apply-citric input[type="search"],
+.apply-citric input[type="tel"],
+.apply-citric input[type="text"],
+.apply-citric input[type="time"],
+.apply-citric input[type="url"],
+.apply-citric input[type="week"],
+.apply-citric select,
+.apply-citric textarea,
+[data-citric="input"],
+[data-citric="select"] select,
+[data-citric="rich-select"],
+[data-citric="textarea"] {
+  height: 2.5rem;
+  padding: var(--spacing-3);
+  outline: none;
+  box-sizing: border-box;
+  background-color: var(--light-300);
+  border: 1px solid var(--border-color, var(--light-600));
+  border-radius: var(--radius-xs);
+  font: var(--font-body2);
+  color: var(--light-contrastText);
+  caret-color: var(--light-contrastText);
+  transition: background-color 0.3s, box-shadow 0.3s;
+
+  &::placeholder {
+    opacity: 60%;
+    color: var(--light-contrastText);
+  }
+
+  &:focus {
+    border-color: var(--border-color, var(--scheme-500, var(--primary-500)));
+    box-shadow: inset 0 0 0 1px var(--border-color, var(--scheme-500, var(--primary-500)));
+  }
+
+  &:disabled {
+    background-color: var(--light-500);
+    border-color: var(--light-600);
+    cursor: not-allowed;
+  }
+
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover, 
+  &:-webkit-autofill:focus {
+    -webkit-text-fill-color: var(--light-contrastText);
+    box-shadow: inset 0 0 0 1000px var(--light-300);
+  }
+}
+
+
+.apply-citric button.citric-icon,
+.apply-citric input[type="button"].citric-icon,
+.apply-citric input[type="submit"].citric-icon,
+.apply-citric input[type="reset"].citric-icon,
+.apply-citric a.citric-icon,
+[data-citric="icon-box"] {
+  /* Default variables */
+
+  --size: 24px;
+  --bg: var(--light-500);
+  --bg-hover: var(--light-600);
+  --fg: var(--light-contrastText);
+
+  /* General CSS */
+
+  box-sizing: border-box;
+  display: inline-flex;
+  border-radius: 100%;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  font-size: 0.75rem;
+  background-color: var(--bg);
+  width: var(--size);
+  height: var(--size);
+  color: var(--fg);
+
+  /* Sizes */
+
+  &.xs {
+    --size: 20px;
+  }
+  &.md {
+    --size: 32px;
+    font-size: 1rem;
+  }
+  &.lg {
+    --size: 40px;
+    font-size: 1rem;
+  }
+
+  /* Appearances */
+
+  &.square {
+    border-radius: var(--radius-xs);
+  }
+
+  /* Colors */
+
+  &[data-color-scheme] {
+    --bg: var(--scheme-500);
+    --bg-hover: var(--scheme-600);
+    --fg: var(--scheme-contrastText);
+  }
+
+  &[data-color-palette] {
+    --bg: var(--palette-600);
+    --bg-hover: var(--palette-500);
+    --fg: var(--palette-50);
+  }
+}
+
+/* Buttons and anchors (icon buttons) */
+
+a[data-citric="icon-box"], .apply-citric a.citric-icon,
+button[data-citric="icon-box"], .apply-citric button.citric-icon,
+input[type="button"][data-citric="icon-box"], .apply-citric input[type="button"].citric-icon,
+input[type="submit"][data-citric="icon-box"], .apply-citric input[type="submit"].citric-icon,
+input[type="reset"][data-citric="icon-box"], .apply-citric input[type="reset"].citric-icon,
+[data-citric="button"][data-citric="icon-box"] {
+  cursor: pointer;
+  text-decoration: none;
+  &:disabled {
+    pointer-events: none;
+    opacity: 48%;
+  }
+  &:hover, &:focus {
+    background-color: var(--bg-hover);
+  }
+}
+
+
+.apply-citric form, [data-citric="form"] {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  > .row {
+    align-items: start;
+    gap: 10px;
+    > [data-citric="form-group"] {
+      flex: 1;
+    }
+  }
+
+  > .button-group {
+    display: flex;
+    justify-content: end;
+    gap: 8px;
+  }
+
+  [type=reset] {
+    --scheme-400: var(--inverse-400);
+    --scheme-500: var(--inverse-500);
+    --scheme-contrastText: var(--inverse-contrastText);
+  }
+}
+
+
+[data-citric="form-group"] {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  label {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    > .row {
+      gap: 8px;
+    }
+    p {
+      margin: 0;
+    }
+  }
+
+  .feedback, .warning {
+    margin: 0;
+    display: none;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    line-height: 16px;
+  }
+
+  .warning:before {
+    font-family: CitricIconsOutline;
+    content: var(--citric-icon-outline-ExclamationCircle);
+  }
+
+  &.error {
+    --border-color: var(--danger-500);
+    .feedback {
+      color: var(--danger-500);
+      &:before {
+        font-family: CitricIconsOutline;
+        font-size: 12px;
+        color: var(--danger-contrastText);
+        content: var(--citric-icon-outline-TimesCircle);
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--danger-500);
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+
+
+[data-citric="field-group"] {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  background-color: var(--light-400);
+  width: fit-content;
+
+  > :not(:first-child) {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+
+  > :not(:last-child) {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  > .addon,
+  &.auto > :not(input, select, textarea, button:not(.citric-icon)) {
+    min-width: 40px;
+    padding: 0 var(--spacing-3);
+    gap: var(--spacing-3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--light-600);
+    border-radius: var(--radius-xs);
+    box-sizing: border-box;
+    margin: 0;
+    height: inherit;
+    &:not(:last-child) {
+      border-right: none;
+    }
+    &:not(:first-child) {
+      border-left: none;
+    }
+  }
+}
+
+
+input[data-citric="favorite"][type="checkbox"] {
+  --icon: var(--citric-icon-outline-Star);
+  --icon-fill: var(--citric-icon-fill-StarFill);
+  --height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+  cursor: pointer;
+  font-size: 16px;
+
+  &:before {
+    font-family: 'CitricIconsOutline';
+    color: var(--light-700);
+    content: var(--icon);
+  }
+
+  &:checked:before {
+    font-family: 'CitricIconsFill';
+    color: var(--yellow-500);
+    content: var(--icon-fill);
+  }
+
+  &.sm {
+    font-size: 12px;
+    --height: 28px; 
+  }
+
+  &.lg {
+    font-size: 20px;
+    --height: 56px;
+  }
+
+  &.fit-parent {
+    --height: 100%;
+  }
+
+  &.circle, &.square {
+    height: var(--height);
+    aspect-ratio: 50 / 42;
+    background-color: var(--light-500);
+    border-radius: 4px;
+    transition: background-color 0.3s;
+    &:hover:not(:disabled) {
+      background-color: var(--light-600);
+    }
+    &.circle {
+      aspect-ratio: 1;
+      border-radius: 50%;
+    }
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &[aria-busy="true"] {
+    cursor: progress;
+    &:before {
+      font-family: 'CitricIconsFill';
+      content: var(--icon-fill);
+    }
+  }
+}
+
+
+.apply-citric hr, [data-citric="divider"] {
+  --size: 1px;
+  margin: 0;
+  background-color: var(--scheme-500, var(--light-500));
+  height: var(--size);
+  width: auto;
+  border: none;
+  align-self: stretch;
+
+  &.vertical {
+    height: auto;
+    width: var(--size);
+  }
+
+  &.md { --size: 2px; }
+  &.lg { --size: 4px; }
+}
+
+
+[data-citric="circle"] {
+  --size: 12px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--scheme-500, var(--palette-500, var(--light-500)));
+  color: var(--scheme-contrastText, var(--palette-900, var(--light-contrastText)));
+  overflow: clip;
+  width: var(--size);
+  height: var(--size);
+
+  &.bordered {
+    border: 2px solid var(--scheme-600, var(--palette-600, var(--light-600)));
+  }
+
+  &.xxs { --size: 8px; }
+  &.sm { --size: 18px; }
+  &.md { --size: 27px; }
+  &.lg { --size: 40px; }
+  &.xl { --size: 60px; }
+  &.xxl { --size: 90px; }
+}
+
+.apply-citric input[type="checkbox"],
+[data-citric="checkbox-row"] input[type="checkbox"],
+[data-citric="checkbox"] {
+  /* General css */
+
+  appearance: none;
+  position: relative;
+  box-sizing: border-box;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--radius-xxs);
+  border: 1px solid var(--light-contrastText);
+  background-color: var(--light-500);
+  cursor: pointer;
+  margin: 0;
+
+  /* States */
+
+  &:disabled {
+    opacity: 0.24;
+  }
+
+  &:checked {
+    border-color: var(--scheme-700, var(--inverse-700));
+    background-color: var(--scheme-500, var(--inverse-500));
+  }
+
+  &:checked:after {
+    content: '';
+    top: 0.18rem;
+    left: 0.359rem;
+    width: 0.236rem;
+    height: 0.471rem;
+    position: absolute;
+    border-bottom: 2px solid var(--scheme-contrastText, var(--inverse-contrastText));
+    border-right: 2px solid var(--scheme-contrastText, var(--inverse-contrastText));
+    transform: rotate(45deg);
+  }
+}
+
+[data-citric="checkbox-row"] {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  line-height: 1;
+}
+
+
+[data-citric="card"] {
+  background-color: var(--scheme-300, var(--light-300));
+  padding: var(--spacing-6);
+  border: 1px solid var(--scheme-600, var(--light-600));
+  color: var(--scheme-contrastText, var(--light-contrastText));
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+
+  &.xxs { padding: var(--spacing-3); }
+  &.xs { padding: var(--spacing-4); }
+  &.sm { padding: var(--spacing-5); }
+  &.lg { padding: var(--spacing-7); }
+  &.xl { padding: var(--spacing-8); }
+  &.xxl { padding: var(--spacing-9); }
+
+  &.bg-400 {
+    background-color: var(--scheme-400, var(--light-400));
+    border-color: var(--scheme-500, var(--light-500));
+    &.clickable:hover { background-color: var(--scheme-500, var(--light-500)); }
+  }
+
+  &.bg-500 {
+    background-color: var(--scheme-500, var(--light-500));
+    border-color: var(--scheme-600, var(--light-600));
+    &.clickable:hover { background-color: var(--scheme-600, var(--light-600)); }
+  }
+
+  &.bg-600 {
+    background-color: var(--scheme-600, var(--light-600));
+    border-color: var(--scheme-500, var(--light-500));
+    &.clickable:hover { background-color: var(--scheme-500, var(--light-500)); }
+  }
+
+  &.clickable, &[tab-index="0"], &[href] {
+    cursor: pointer;
+    &:hover, &:focus { background-color: var(--scheme-400, var(--light-400)); }
+  }
+}
+
+
+.apply-citric button:not(.citric-icon),
+.apply-citric input[type="button"]:not(.citric-icon),
+.apply-citric input[type="submit"]:not(.citric-icon),
+.apply-citric input[type="reset"]:not(.citric-icon),
+[data-citric="button"] {
+  /* General css */
+
+  display: flex;
+  align-items: center;
+  background-color: var(--scheme-500, var(--primary-500));
+  color: var(--scheme-contrastText, var(--primary-contrastText));
+  padding-inline: var(--spacing-3);
+  padding-block: var(--spacing-2);
+  font: var(--font-body2);
+  font-weight: 500;
+  border-radius: var(--radius-xs);
+  user-select: none;
+  justify-content: center;
+  cursor: pointer;
+  border: 1px solid var(--scheme-500, var(--primary-500));
+  gap: var(--spacing-2);
+  position: relative;
+
+  /* Appearances */
+
+  &.outlined, &.text {
+    background-color: transparent;
+    color: var(--scheme-500, var(--primary-500));
+  }
+
+  &.text {
+    border-color: transparent;
+  }
+
+  /* Sizes */
+
+  &.lg {
+    font: 500 1rem/1.5 Roboto, sans-serif;
+    padding-inline: var(--spacing-4);
+    padding-block: var(--spacing-3);
+  }
+
+  &.sm {
+    font: var(--font-microtext1);
+    padding-inline: var(--spacing-3);
+    padding-block: var(--spacing-2);
+  }
+
+  /* States */
+
+  &:focus {
+    outline: 0.125rem solid var(--inverse-500);
+    outline-offset: 0.15rem;
+  }
+
+  &:hover:not(.outlined):not(.text):not(:disabled),
+  &:focus:not(.outlined):not(.text),
+  &:active:not(.outlined):not(.text):not(:disabled) {
+    background-color: var(--scheme-400, var(--primary-400));
+    border-color: var(--scheme-400, var(--primary-400));
+  }
+
+  &.outlined:hover:not(:disabled),
+  &.outlined:focus,
+  &.outlined:active:not(:disabled) {
+    background-color: var(--scheme-500, var(--primary-500));
+    color: var(--scheme-contrastText, var(--primary-contrastText));
+  }
+
+  &.text:hover:not(:disabled),
+  &.text:focus,
+  &.text:active:not(:disabled) {
+    border-color: var(--scheme-500, var(--primary-500));
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  /* Feedback text on click */
+
+  &[data-feedback]:after {
+    content: attr(data-feedback);
+    font: var(--font-microtext1);
+    color: var(--inverse-contrastText);
+    position: absolute;
+    top: 0;
+    padding: 3px 6px;
+    border: 1px solid var(--inverse-500);
+    border-radius: 4px;
+    background-color: var(--inverse-300);
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  &[data-feedback]:not(:active):after {
+    transition: opacity 1s, top 1s;
+  }
+
+  &[data-feedback]:active:after {
+    opacity: 1;
+    top: calc(100% + 10px);
+  }
+
+  .loader {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  &[aria-busy="true"] {
+    cursor: progress;
+    > *:not(.loader) {
+      opacity: 0;
+    }
+    .loader {
+      opacity: 1;
+    }
+  }
+}
+
+
+[data-citric="breadcrumb"] {
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: row;
+    font: var(--font-body2);
+    line-height: 1.5;
+  }
+
+  li {
+    color: var(--light-contrastText);
+
+    a[href] {
+      color: var(--light-700);
+      text-decoration: none;
+      &:hover {
+        color: var(--light-contrastText);
+        text-decoration: underline;
+      }
+    }
+
+    &:not(:first-child):before {
+      content: '/';
+      color: var(--light-700);
+      margin: 0 10px;
+    }
+  }
+}
+
+.apply-citric blockquote, [data-citric="blockquote"] {
+  display: flex;
+  margin: var(--spacing-5);
+  gap: var(--spacing-5);
+
+  &:before {
+    content: '';
+    border: 2px solid var(--primary-400);
+    border-radius: var(--radius-sm);
+  }
+
+  &[data-color-scheme]:before {
+    border-color: var(--scheme-400);
+  }
+
+  &[data-color-palette]:before {
+    border-color: var(--palette-300);
+  }
+}
+
+
+[data-citric="badge"] {
+  /* General css */
+
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-2);
+  font: var(--font-microtext1);
+  line-height: normal;
+  border-radius: var(--radius-full);
+  background-color: var(--palette-50, var(--indigo-50));
+  color: var(--palette-800, var(--indigo-800));
+  padding: 4px 8px;
+
+  &.square {
+    border-radius: var(--radius-xs);
+  }
+}
+
+/* Clickable badges */
+
+button[data-citric="badge"], a[data-citric="badge"] {
+  background-color: var(--palette-800, var(--indigo-800));
+  color: var(--palette-50, var(--indigo-50));
+  font-weight: 300;
+  &:active, &:focus, &:hover {
+    background-color: var(--palette-700, var(--indigo-700));
+  }
+  &:disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+}
+
+button[data-citric="badge"] {
+  border: none;
+  cursor: pointer;
+}
+
+a[data-citric="badge"] {
+  &:active, &:focus, &:hover {
+    text-decoration: underline;
+  }
+}
+
+
+[data-citric="avatar"], [data-citric="avatar-group"] [data-citric="avatar"] {
+  --size: 5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  font-family: var(--font-system-1);
+  font-weight: bold;
+  background-color: var(--palette-800, var(--indigo-800));
+  color: var(--palette-50, var(--indigo-50));
+  width: var(--size);
+  height: var(--size);
+  font-size: 1.5rem;
+  line-height: 2.25rem;
+  text-transform: uppercase;
+  flex-shrink: 0;
+
+  img {
+    object-fit: cover;
+    width: var(--size);
+    height: var(--size);
+  }
+}
+
+[data-citric="avatar-group"].square [data-citric="avatar"], [data-citric="avatar"].square {
+  border-radius: var(--radius-sm);
+}
+
+[data-citric="avatar-group"].xxs [data-citric="avatar"], [data-citric="avatar"].xxs {
+  --size: 1.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+[data-citric="avatar-group"].xs [data-citric="avatar"], [data-citric="avatar"].xs {
+  --size: 2rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+[data-citric="avatar-group"].sm [data-citric="avatar"], [data-citric="avatar"].sm {
+  --size: 3rem;
+  font-size: 1rem;
+  line-height: 2rem;
+}
+
+[data-citric="avatar-group"].md [data-citric="avatar"], [data-citric="avatar"].md {
+  --size: 4rem;
+  font-size: 1.25rem;
+  line-height: 2rem;
+}
+
+[data-citric="avatar-group"].xl [data-citric="avatar"], [data-citric="avatar"].xl {
+  --size: 8rem;
+  font-size: 2rem;
+  line-height: 4rem;
+}
+
+[data-citric="avatar-group"].xxl [data-citric="avatar"], [data-citric="avatar"].xxl {
+  --size: 12rem;
+  font-size: 3.5rem;
+  line-height: 5.5rem;
+}
+
+[data-citric="avatar-group"] {
+  display: flex;
+  flex-direction: row;
+  --gap: -0.75rem;
+
+  &.xxs, &.xs { --gap: -0.25rem; }
+  &.sm { --gap: -0.5rem; }
+  &.xl { --gap: -1rem; }
+  &.xxl { --gap: -2rem; }
+
+  [data-citric="avatar"]:not(:first-child) {
+    margin-left: var(--gap);
+  }
+
+  &[data-max-items="1"] [data-citric="avatar"]:nth-child(n+2) { display: none; }
+  &[data-max-items="2"] [data-citric="avatar"]:nth-child(n+3) { display: none; }
+  &[data-max-items="3"] [data-citric="avatar"]:nth-child(n+4) { display: none; }
+  &[data-max-items="4"] [data-citric="avatar"]:nth-child(n+5) { display: none; }
+  &[data-max-items="5"] [data-citric="avatar"]:nth-child(n+6) { display: none; }
+  &[data-max-items="6"] [data-citric="avatar"]:nth-child(n+7) { display: none; }
+  &[data-max-items="7"] [data-citric="avatar"]:nth-child(n+8) { display: none; }
+  &[data-max-items="8"] [data-citric="avatar"]:nth-child(n+9) { display: none; }
+  &[data-max-items="9"] [data-citric="avatar"]:nth-child(n+10) { display: none; }
+  &[data-max-items="10"] [data-citric="avatar"]:nth-child(n+11) { display: none; }
+}
+
+
+[data-citric="alert"] {
+  padding: var(--spacing-4);
+  font: var(--font-body2);
+  background-color: var(--warning-500);
+  color: var(--warning-contrastText);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  line-height: 1;
+
+  &:before {
+    font-family: CitricIconsOutline;
+    font-size: 1rem;
+    content: var(--citric-icon-outline-ExclamationTriangle);
+  }
+
+  &.error {
+    background-color: var(--danger-500);
+    color: var(--danger-contrastText);
+    &:before { content: var(--citric-icon-outline-TimesCircle); }
+  }
+
+  &.info {
+    background-color: var(--light-500);
+    color: var(--light-contrastText);
+    &:before { content: var(--citric-icon-outline-InfoCircle); }
+  }
+}
+
+[data-citric="accordion"] {
+  --max-height: 300px;
+  --animation-duration: 0.3s;
+
+  > header input[type="checkbox"][aria-controls] {
+    appearance: none;
+    margin: 0;
+    cursor: pointer;
+    transition: transform var(--animation-duration) ease-out;
+    &:before {
+      font-family: CitricIconsOutline;
+      font-size: 16px;
+      content: var(--citric-icon-outline-ChevronDown);
+    }
+    &:checked {
+      transform: rotate(180deg);
+    }
+  }
+
+  > section {
+    max-height: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+    transition: max-height var(--animation-duration) ease-out;
+  }
+
+  &:has(> header input[type="checkbox"][aria-controls]:checked) > section {
+    overflow: auto;
+    animation: var(--animation-duration) accordion-delayed-overflow;
+    max-height: var(--max-height);
+  }
+
+  &.card {
+    --bg-color: var(--scheme-300, var(--light-300));
+    --border-color: var(--scheme-500, var(--light-500));
+    border-radius: 4px;
+    background-color: var(--bg-color);
+    border: 1px solid transparent;
+    transition: border-color var(--animation-duration);
+
+    > header > label {
+      padding: 16px;
+      font: var(--font-body1);
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      flex: 1;
+      cursor: pointer;
+    }
+
+    > section .content {
+      padding: 16px;
+
+      > p:first-child {
+        margin-top: 0;
+      }
+
+      > p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &:has(header input[type="checkbox"][aria-controls]:focus),
+    &:hover {
+      border-color: var(--scheme-500, var(--light-500));
+    }
+
+    &.bg-400 {
+      --bg-color: var(--scheme-400, var(--light-400));
+      --border-color: var(--scheme-600, var(--light-600));
+    }
+
+    &.bg-500 {
+      --bg-color: var(--scheme-500, var(--light-500));
+      --border-color: var(--scheme-600, var(--light-600));
+    }
+
+    &.bg-600 {
+      --bg-color: var(--scheme-600, var(--light-600));
+      --border-color: var(--scheme-400, var(--light-400));
+    }
+  }
+}
+
+@keyframes accordion-delayed-overflow {
+  0% {
+    overflow: hidden;
+  }
+  99% {
+    overflow: hidden;
+  }
+  100% {
+    overflow: auto;
+  }
+}