:root {
  /*  Ваши базовые цвета (без изменений) */
  --color-brand: rgba(255, 122, 0, 1);
  --color-modal: rgba(255, 158, 77, 1);
  --color-neutral-dark: rgba(30, 30, 30, 1);
  --color-neutral-medium: rgba(138, 135, 133, 1);
  --color-neutral-light: rgba(247, 245, 243, 1);
  --color-neutral-ultralight: rgba(255, 255, 255, 1);
  --color-divider: rgba(68, 68, 68, 0.25);
  --color-success: rgba(76, 175, 80, 1);
  --color-danger: rgba(244, 67, 54, 1);
  --color-text-success: rgba(29, 97, 29, 1);
  --color-background-success: rgba(229, 255, 229, 1);
  --color-text-danger: rgba(140, 42, 42, 1);
  --color-background-danger: rgba(255, 229, 229, 1);

  /* Переменные для состояний (в формате --color-{state}-{color}) */

  /* Состояние hover */
  --color-hover-brand: rgba(255, 148, 51, 1); /* Светлее, чем --color-brand */
  --color-hover-modal: rgba(255, 180, 100, 1);
  --color-hover-neutral-dark: rgba(50, 50, 50, 1);
  --color-hover-neutral-medium: rgba(160, 157, 155, 1);
  --color-hover-neutral-light: rgba(255, 255, 255, 1);
  --color-hover-neutral-ultralight: rgba(250, 250, 250, 1);
  --color-hover-success: rgba(102, 204, 106, 1); /* Светлее, чем --color-success */
  --color-hover-danger: rgba(255, 102, 89, 1); /* Светлее, чем --color-danger */
  --color-hover-text-success: rgba(35, 115, 35, 1);
  --color-hover-background-success: rgba(235, 255, 235, 1);
  --color-hover-text-danger: rgba(160, 50, 50, 1);
  --color-hover-background-danger: rgba(255, 235, 235, 1);

  /* Состояние focus */
  --color-focus-brand: var(--color-brand); /* Обычно как default */
  --color-focus-modal: var(--color-modal);
  --color-focus-neutral-dark: var(--color-neutral-dark);
  --color-focus-neutral-medium: var(--color-neutral-medium);
  --color-focus-neutral-light: var(--color-neutral-light);
  --color-focus-neutral-ultralight: var(--color-neutral-ultralight);
  --color-focus-success: var(--color-success); /* Обычно как default */
  --color-focus-danger: var(--color-danger); /* Обычно как default */
  --color-focus-text-success: var(--color-text-success);
  --color-focus-background-success: var(--color-background-success);
  --color-focus-text-danger: var(--color-text-danger);
  --color-focus-background-danger: var(--color-background-danger);

  /* Состояние active */
  --color-active-brand: rgba(255, 96, 0, 1); /* Темнее, чем --color-brand */
  --color-active-modal: rgba(255, 130, 50, 1);
  --color-active-neutral-dark: rgba(20, 20, 20, 1);
  --color-active-neutral-medium: rgba(110, 107, 105, 1);
  --color-active-neutral-light: rgba(230, 228, 226, 1);
  --color-active-neutral-ultralight: rgba(240, 240, 240, 1);
  --color-active-success: rgba(61, 140, 64, 1); /* Темнее, чем --color-success */
  --color-active-danger: rgba(195, 53, 43, 1); /* Темнее, чем --color-danger */
  --color-active-text-success: rgba(23, 77, 23, 1);
  --color-active-background-success: rgba(210, 230, 210, 1);
  --color-active-text-danger: rgba(110, 33, 33, 1);
  --color-active-background-danger: rgba(230, 210, 210, 1);

  /* Состояние disabled (пример) */
  --color-disabled-brand: rgba(255, 122, 0, 0.5); /* Сниженная прозрачность */
  --color-disabled-modal: rgba(255, 158, 77, 0.5);
  --color-disabled-neutral-dark: rgba(30, 30, 30, 0.3);
  --color-disabled-neutral-medium: rgba(138, 135, 133, 0.3);
  --color-disabled-neutral-light: rgba(247, 245, 243, 0.3);
  --color-disabled-neutral-ultralight: rgba(255, 255, 255, 0.3);
  --color-disabled-success: rgba(76, 175, 80, 0.5);
  --color-disabled-danger: rgba(244, 67, 54, 0.5);
  --color-disabled-text-success: rgba(29, 97, 29, 0.5);
  --color-disabled-background-success: rgba(229, 255, 229, 0.5);
  --color-disabled-text-danger: rgba(140, 42, 42, 0.5);
  --color-disabled-background-danger: rgba(255, 229, 229, 0.5);

  /* Размеры текста */
  --font-size-xxs: 1.2rem; /* Очень мелкий текст (12px) */
  --line-height-xxs: 150%; /* 1.8rem */

  --font-size-xs: 1.4rem; /* Мелкий текст (14px, основной) */
  --line-height-xs: 150%; /* 2.1rem */

  --font-size-sm: 1.6rem; /* Средний текст (16px) */
  --line-height-sm: 140%; /* 2.24rem */

  --font-size-md: 1.8rem; /* Крупный текст (18px) */
  --line-height-md: 140%; /* 2.52rem */

  --font-size-lg: 2.2rem; /* Очень крупный текст (22px) */
  --line-height-lg: 130%; /* 2.86rem */

  --font-size-xl: 2.8rem; /* Заголовок (28px) */
  --line-height-xl: 120%; /* 3.36rem */

  --font-size-xxl: 3.6rem; /* Крупный заголовок (36px) */
  --line-height-xxl: 110%; /* 3.96rem */

  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 500;
  --font-weight-bold: 600;
  --font-weight-extrabold: 700;
  --font-weight-black: 800;

  --font-family: akrobat, sans-serif; /* Шрифт Akrobat */
}

*,
*::before,
*::after {
  font: inherit;
  box-sizing: border-box;
}

html {
  height: 100vh;
  height: 100dvh;
  font-size: 62.5%;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular) !important;
  -webkit-font-smoothing: antialiased; /* Или subpixel-antialiased */
  text-rendering: optimizeLegibility; /* Или geometricPrecision */
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  background-color: var(--color-neutral-ultralight);

  #root {
    background: inherit;
    height: 100%;
  }
}

:is(.label, label) {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);

  > :is(select, input) {
    width: max(31rem, 100%);
  }
}

label:has(input[type='file'] + div) {
  input {
    position: absolute;
    left: -999vw;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  div {
    input:disabled + & {
      cursor: not-allowed;
    }
  }
}

label:has(input[type='checkbox']) {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.5rem;
  margin-block: -0.5rem;
}

p {
  margin: 0;
}

:is(select, input) {
  outline: none;
  border: none;
  padding: 0.6rem 1.5rem;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-semibold);
  --color-text: var(--color-neutral-dark);
  --color-background: var(--color-neutral-ultralight);
  --box-shadow: inset 0 0 0 0.05rem var(--color-brand);
  box-shadow: var(--box-shadow);
  border-radius: 0.4rem;
  transition: box-shadow 100ms;
  color: var(--color-text);
  background-color: var(--color-background);

  &:not([type='checkbox']) {
    appearance: none;
  }

  &:is(:-webkit-autofill, :-webkit-autofill:hover, :-webkit-autofill:focus) {
    -webkit-text-fill-color: var(--color-text);
    box-shadow:
      var(--box-shadow),
      inset 0 0 0 100vw var(--color-background);
  }

  &:focus,
  &:active {
    --box-shadow: inset 0 0 0 0.15rem var(--color-brand);
  }

  &:disabled {
    cursor: not-allowed;
    --color-text: var(--color-neutral-medium);
    --color-background: var(--color-neutral-light);
    --box-shadow: inset 0 0 0 0.05rem var(--color-divider);
  }
}

input {
  &:focus-within {
    box-shadow: inset 0 0 0 0.15rem var(--color-brand);
  }

  &:is([type='date'], [type='search'], [type='number']) {
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    padding-right: 1rem;
  }

  &[type='search'] {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.00942 4.37109C7.60088 4.1261 8.23481 4 8.875 4C9.51519 4 10.1491 4.1261 10.7406 4.37109C11.332 4.61608 11.8695 4.97517 12.3221 5.42785C12.7748 5.88054 13.1339 6.41796 13.3789 7.00942C13.6239 7.60088 13.75 8.23481 13.75 8.875C13.75 9.51519 13.6239 10.1491 13.3789 10.7406C13.2302 11.0995 13.0396 11.4385 12.8114 11.7508L15.7803 14.7197C16.0732 15.0126 16.0732 15.4874 15.7803 15.7803C15.4874 16.0732 15.0126 16.0732 14.7197 15.7803L11.7508 12.8114C11.4385 13.0396 11.0995 13.2302 10.7406 13.3789C10.1491 13.6239 9.51519 13.75 8.875 13.75C8.23481 13.75 7.60088 13.6239 7.00942 13.3789C6.41796 13.1339 5.88054 12.7748 5.42785 12.3221C4.97517 11.8695 4.61608 11.332 4.37109 10.7406C4.1261 10.1491 4 9.51519 4 8.875C4 8.23481 4.1261 7.60088 4.37109 7.00942C4.61608 6.41796 4.97517 5.88054 5.42785 5.42785C5.88054 4.97517 6.41796 4.61608 7.00942 4.37109ZM8.875 5.5C8.43179 5.5 7.99292 5.5873 7.58344 5.75691C7.17397 5.92652 6.80191 6.17512 6.48851 6.48851C6.17512 6.80191 5.92652 7.17397 5.75691 7.58344C5.5873 7.99292 5.5 8.43179 5.5 8.875C5.5 9.31821 5.5873 9.75708 5.75691 10.1666C5.92652 10.576 6.17512 10.9481 6.48851 11.2615C6.80191 11.5749 7.17397 11.8235 7.58344 11.9931C7.99292 12.1627 8.43179 12.25 8.875 12.25C9.31821 12.25 9.75708 12.1627 10.1666 11.9931C10.576 11.8235 10.9481 11.5749 11.2615 11.2615C11.5749 10.9481 11.8235 10.576 11.9931 10.1666C12.1627 9.75708 12.25 9.31821 12.25 8.875C12.25 8.43179 12.1627 7.99292 11.9931 7.58344C11.8235 7.17397 11.5749 6.80191 11.2615 6.48851C10.9481 6.17512 10.576 5.92652 10.1666 5.75691C9.75708 5.5873 9.31821 5.5 8.875 5.5Z' fill='%231E1E1E'/%3E%3C/svg%3E");
    padding-right: 3.5rem;

    &::-webkit-search-cancel-button {
      display: none;
      opacity: 0;
    }
  }

  &[type='checkbox'] {
    aspect-ratio: 1/1;
    width: 1.6rem;
    border: none;
    margin: 0;
    accent-color: var(--color-brand);
  }
}

select {
  cursor: pointer;
  position: relative;

  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.55 6.4a.75.75 0 0 1 1.05.15l5.4 7.2 5.4-7.2a.75.75 0 0 1 1.2.9l-6.6 8.8-6.6-8.8a.75.75 0 0 1 .15-1.05' fill='currentColor'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 1rem) center;
  padding-right: 3.5rem;

  option:disabled {
    display: none;
  }
}

button,
.button,
input[type='file'] {
  cursor: pointer;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 0.4rem;
  padding: 0.8rem 1.6rem;
  --color-text: var(--color-neutral-dark);
  --color-background: var(--color-neutral-light);
  --box-shadow: inset 0 0 0 0.1rem var(--color-divider);

  color: var(--color-text);
  background-color: var(--color-background);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--box-shadow);

  &.accent {
    --color-text: var(--color-neutral-ultralight);
    --color-background: var(--color-brand);
  }

  &.modal {
    --color-text: var(--color-neutral-ultralight);
    --color-background: var(--color-modal);
    --box-shadow: inset 0 0 0 0.1rem var(--color-brand);
  }

  &.danger {
    color: var(--color-neutral-ultralight);
    --color-background: var(--color-danger);
    --box-shadow: inset 0 0 0 0.1rem var(--color-divider);
  }

  form:invalid &[type='submit'],
  &[data-disabled],
  &[disabled] {
    cursor: not-allowed;
    color: color-mix(in oklab, var(--color-text), rgb(0, 0, 0) 20%);
    background-color: color-mix(in oklab, var(--color-background), rgb(0, 0, 0) 20%);
    --box-shadow: inset 0 0 0 0.05rem var(--color-divider);
  }
}

input[type='file'] {
  color: transparent;
  position: relative;
  width: 100%;

  &::-webkit-file-upload-button {
    visibility: hidden;
  }
  &::before {
    position: absolute;
    inset: 0;
    color: var(--color-text);
    background-color: var(--color-background);
    box-shadow: var(--box-shadow);
    content: 'Выберите файл';
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &:disabled::before {
    cursor: not-allowed;
    --color-text: var(--color-neutral-medium);
  }

  &:valid::before {
    content: 'Файл выбран';
    --color-text: var(--color-text-success);
    --color-background: var(--color-background-success);
  }

  &:user-invalid::before {
    content: 'Файл не выбран';
    --color-text: var(--color-text-danger);
    --color-background: var(--color-background-danger);
  }
}

::backdrop {
  background-color: var(--color-divider);
  backdrop-filter: grayscale(1);
  outline: none;
  border: none;
}

dialog {
  border: none;
  outline: none;
  background: transparent;
  height: 100%;
  place-items: center;

  &[open] {
    display: grid;
  }

  &[open] > div {
    width: 38.8rem;
    display: flex;
    flex-direction: column;
    padding: 3rem;
    border-radius: 1.2rem;
    box-shadow:
      inset 0 0 0 0.1rem var(--color-divider),
      0 0.4rem 0.8rem 0 var(--color-divider);
    background-color: var(--color-neutral-light);

    form > .section {
      margin: 0;

      > div {
        border-radius: 0;
        padding: 0;
        box-shadow: none;
      }
    }
  }
}

:not(dialog) > div > form .section.column {
  border-radius: 1.2rem;
  box-shadow: 0 0 0 0.5px var(--color-divider);
}

.section {
  background-color: var(--color-neutral-light);

  & > div {
    gap: 2rem;
    padding: 3rem 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(39rem, 1fr));

    @media (width <= 840px), (orientation: portrait) {
      grid-template-columns: auto;
    }
  }

  &.column > div {
    grid-template-columns: auto;
  }

  &.row > div {
    > :is(dt, .label, div) {
      flex: 1 1;
      align-self: flex-end;

      > :is(input, dd) {
        min-height: 3.8rem;
      }

      > dd > button {
        min-height: 3.8rem;
      }
    }
  }
}

.wrapper {
  margin-inline: auto;
  width: min(100%, 124.4rem);
  padding-inline: 2rem;
}

a {
  color: inherit;
  text-decoration: none;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  margin: 0;
}

h2 {
  color: var(--color-brand);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 3rem;
}

dl {
  font: inherit;
  margin: 0;

  dt {
    text-align: left;
  }
  dd {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-neutral-ultralight);
    text-align: center;
    border-radius: 0.4rem;
    padding: 0.6rem 1.5rem;
    box-shadow: 0 0 0 0.5px var(--color-divider);

    &.success {
      color: var(--color-neutral-ultralight);
      background-color: var(--color-success);
    }

    &.accent {
      color: var(--color-neutral-ultralight);
      background-color: var(--color-brand);
    }

    &.modal {
      color: var(--color-neutral-ultralight);
      background-color: var(--color-modal);
      box-shadow: inset 0 0 0 0.1rem var(--color-brand);
    }

    &.danger {
      color: var(--color-neutral-ultralight);
      background-color: var(--color-danger);
      box-shadow: inset 0 0 0 0.1rem var(--color-divider);
    }

    &:has(:is(button, a)) {
      padding: 0;

      :is(button, a) {
        width: 100%;
        height: 100%;
        padding: 0.6rem 1.5rem;
        border-radius: inherit;
      }
    }

    a {
      display: inline-block;
      color: var(--color-brand);
      text-decoration: underline;
    }

    button {
      color: inherit;
      background-color: inherit;
    }
  }
}

form {
  display: flex;
  flex-direction: column;

  h2 {
    text-align: left;
    margin-bottom: 2rem;
  }

  .section {
    margin-bottom: 2rem;
  }
}

table {
  font-variant-numeric: lining-nums tabular-nums;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0;
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  border-radius: 0.6rem;

  thead {
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 0.1rem solid var(--color-divider);
  }

  tbody {
    overflow: visible;
  }

  th,
  td {
    min-height: 4.8rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    padding-block: 1.2rem 0.9rem;

    &:first-child {
      padding-inline-start: 1.5rem;
    }

    &:not(:last-child) {
      padding-inline-end: 1rem;
    }

    &:last-child {
      padding-inline-start: 0;
      padding-inline-end: 1.5rem;
    }
  }

  th {
    color: var(--color-neutral-ultralight);
    background-color: var(--color-brand);
    font-weight: var(--font-weight-semibold);
    border: 0.1rem solid var(--color-divider);
    border-left: none;
    border-right: none;
    white-space: nowrap;

    &:first-child {
      border-left: 0.1rem solid var(--color-divider);
      border-radius: 0.6rem 0 0 0;
    }

    &:last-child {
      border-right: 0.1rem solid var(--color-divider);
      border-radius: 0 0.6rem 0 0;
    }
  }

  tr {
    line-height: 2.6rem;

    td {
      border-bottom: 0.1rem solid var(--color-divider);

      &:first-child {
        border-left: 0.1rem solid var(--color-divider);
      }

      &:last-child {
        border-right: 0.1rem solid var(--color-divider);
      }

      &:has(.status) {
        padding-block: 1rem;
      }

      &:has(.table-item-menu) {
        overflow: initial;
        display: flex;
        align-items: center;
        padding-block: 1rem;
      }

      div:has(.table-item-menu) {
        height: 2rem;
        aspect-ratio: 1/1;
        position: relative;
        &:hover .table-item-menu {
          opacity: 1;
          visibility: visible;
          pointer-events: all;
        }

        .table-item-menu {
          position: absolute;
          right: 50%;
          top: 50%;
          opacity: 0;
          visibility: hidden;
          pointer-events: none;
          z-index: 2;
          margin: -1rem;
          padding: 1rem;
          transition:
            opacity 0.1s,
            visivility 0.1s;

          ul {
            margin: 0;
            padding: 0;
            overflow: hidden;
            border-radius: 0.6rem;
            box-shadow:
              inset 0 0 0 0.1rem var(--color-divider),
              0 0.4rem 0.8rem 0 var(--color-divider);
            list-style: none;

            li {
              cursor: pointer;
              padding: 0.8rem 1.5rem;
              white-space: nowrap;

              background-color: var(--color-neutral-ultralight);

              &:hover {
                background-color: var(--color-neutral-light);
              }
            }
          }
        }
      }
    }

    &:last-child {
      border-bottom: none;

      td {
        &:first-child {
          border-radius: 0 0 0 0.6rem;
        }

        &:last-child {
          border-radius: 0 0 0.6rem 0;
        }
      }
    }
  }

  td {
    color: var(--color-neutral-dark);
    background-color: var(--color-neutral-light);
  }
}

main {
  box-sizing: content-box;
  padding-bottom: 5rem;

  &:has(footer) {
    padding-bottom: 12rem;
  }

  @media (width < 840px), (orientation: portrait) {
    & {
      padding-top: 4rem;
    }
  }
}

.status {
  display: grid;
  place-items: center;
  width: fit-content;
  border-radius: 0.4rem;
  margin-block: -0.2rem;
  padding: 0.2rem 1rem;
  color: var(--color-neutral-medium);
  background-color: var(--color-neutral-light);
  box-shadow: inset 0 0 0 0.1rem var(--color-divider);

  &.accent {
    color: var(--color-neutral-ultralight);
    background-color: var(--color-brand);
  }

  &.success {
    color: var(--color-text-success);
    background-color: var(--color-background-success);
  }

  &.danger {
    color: var(--color-text-danger);
    background-color: var(--color-background-danger);
  }
}

.heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;

  & h2 {
    margin-bottom: 0;
  }

  & .status {
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
  }
}

footer {
  background-color: var(--color-neutral-ultralight);
  position: fixed;
  display: flex;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10rem;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 0.15rem var(--color-divider);

  > div {
    gap: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;

    &:has(:first-child:last-child) {
      justify-content: center;
    }

    button {
      width: 59.2rem;
    }
  }
}

.table-container {
  overflow-y: auto;
  overflow-x: auto;
  height: 100vh;
  height: 100dvh;
  max-width: 100%;

  &:has(> p) {
    display: grid;
    place-items: center;
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
  }
}

fieldset {
  padding: 0;
  border: none;
  margin: 0;
}

/*---------------------------------- SELECT ----------------------------------*/
.select-container {
  --max-items: 3;
  position: relative;

  & > input {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
  }

  .select__input {
    position: relative;

    & > input {
      width: 100%;
      padding-right: 4rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      &:read-only {
        cursor: pointer;
      }

      &:disabled {
        cursor: not-allowed;
      }
    }

    & > svg {
      position: absolute;
      right: 1rem;
      top: 0.9rem;
      pointer-events: none;

      & > path {
        transform-origin: center center;
      }
    }
  }

  .select__items {
    position: absolute;
    top: calc(100% + 0.4rem);
    padding: 0;
    margin: 0;
    left: 0;
    right: 0;
    border-radius: 0.4rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
    --item-height: 3.6rem;
    overflow-y: auto;
    height: auto;
    transform: translateY(-0.4rem);
    transition: transform 0.1s;
    max-height: calc(var(--item-height) * (var(--max-items) + 0.1));

    &:has(.select__item) {
      box-shadow:
        0 0 0 0.05rem var(--color-divider),
        0 0.8rem 1.6rem 0 var(--color-divider);
    }

    .select__item {
      user-select: none;
      min-height: 3.6rem;
      cursor: pointer;
      color: var(--color-neutral-dark);
      background-color: var(--color-neutral-ultralight);
      width: 100%;
      box-shadow: inset 0px -0.05rem 0 0 var(--color-divider);
      padding: 0.7rem 1.5rem 0.6rem;
      list-style: none;
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);

      &:not(.select__item--disabled):hover {
        background-color: var(--color-neutral-light);
      }

      &.select__item--active {
        color: var(--color-brand);
        font-weight: var(--font-weight-semibold);
      }

      &.select__item--disabled {
        cursor: auto;
        color: var(--color-neutral-medium);
      }

      &:last-child {
        box-shadow: none;
      }

      & > span {
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }

  &.select-container--open {
    .select__input > svg > path {
      rotate: 180deg;
    }

    .select__items {
      opacity: 1;
      visibility: visible;
      pointer-events: all;
      transform: translateY(0);
    }
  }
}