.DataList {
  display: flex;
  flex-direction: column;
  box-shadow: none;
  border-radius: 0;
  background-color: transparent;
  gap: 4px;
}

  .DataList-Option {
    cursor: pointer;
  }

  .DataList-Option:not(.DataList-Option_disabled).DataList-Option_highlight_mouse {
      background-color: var(--color-background-base-main-hover);
    }

  .DataList-Option:not(.DataList-Option_disabled).DataList-Option_highlight_keyboard {
      box-shadow: inset var(--shadow-outline-focused);
    }

  .DataList-Option_disabled {
      cursor: not-allowed;
    }

  .DataList-Option_disabled .ListItemText-TextPrimary {
        color: var(--color-background-base-disabled);
      }

  .DataList-IconWrapper {
    display: flex;
    min-inline-size: var(--select-check-icon-size);
    min-block-size: var(--select-check-icon-size);
  }

  .DataList-IconWrapper_size_s {
        --select-check-icon-size: 16px;
      }

  .DataList-IconWrapper_size_m {
        --select-check-icon-size: 24px;
      }

  .DataList-Container {
    box-shadow: var(--shadow-l);
    border-radius: var(--border-radius-xs);
    background-color: var(--color-background-surface-main);
    inline-size: auto;
    box-sizing: border-box;
    outline: none;
  }

  .DataList-Container_chips {
      padding: var(--popover-chips-padding);
      overflow: hidden;
      display: none;
    }

  .DataList-Container_options {
      --scroll-bar-size: 12px;
    }

  .DataList-Container_options::-webkit-scrollbar {
    inline-size: var(--scroll-bar-size);
  }

  .DataList-Container_options::-webkit-scrollbar-thumb {
    background-color: var(--color-background-secondary);
    border-radius: calc(var(--scroll-bar-size) / 2);
    border: calc(var(--scroll-bar-size) / 4) solid transparent;
    background-clip: padding-box;
    border-image: initial;
    min-block-size: 24px;
  }

  .DataList-Container_options::-webkit-scrollbar-thumb:hover,
    .DataList-Container_options::-webkit-scrollbar-thumb:active {
      border: calc(var(--scroll-bar-size) / 4) solid transparent;
      background-clip: padding-box;
    }

  .DataList-Container_options::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-background-secondary-hover);
    }

  .DataList-Container_options::-webkit-scrollbar-thumb:active {
      background-color: var(--color-background-secondary-pressed);
    }

  .DataList-Container_options::-webkit-scrollbar-corner {
    background: transparent;
  }

  .DataList-Container_options {
      scroll-behavior: smooth;
      overflow: hidden auto;
      max-block-size: 40vb;
}

  .DataList-Container_visible {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

  .DataList-ClearButton {
    margin: var(--clear-button-margin);
  }

  .DataList-ListChips {
    --scroll-bar-size: 12px;
  }

  .DataList-ListChips::-webkit-scrollbar {
    inline-size: var(--scroll-bar-size);
  }

  .DataList-ListChips::-webkit-scrollbar-thumb {
    background-color: var(--color-background-secondary);
    border-radius: calc(var(--scroll-bar-size) / 2);
    border: calc(var(--scroll-bar-size) / 4) solid transparent;
    background-clip: padding-box;
    border-image: initial;
    min-block-size: 24px;
  }

  .DataList-ListChips::-webkit-scrollbar-thumb:hover,
    .DataList-ListChips::-webkit-scrollbar-thumb:active {
      border: calc(var(--scroll-bar-size) / 4) solid transparent;
      background-clip: padding-box;
    }

  .DataList-ListChips::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-background-secondary-hover);
    }

  .DataList-ListChips::-webkit-scrollbar-thumb:active {
      background-color: var(--color-background-secondary-pressed);
    }

  .DataList-ListChips::-webkit-scrollbar-corner {
    background: transparent;
  }

  .DataList-ListChips {
    scroll-behavior: smooth;
    overflow: hidden auto;
    max-block-size: 15vb;

    padding: var(--list-chips-padding);
    gap: var(--list-chips-gap);
    flex-flow: row wrap;
}

  .DataList_size_l {
      --popover-chips-padding: 16px 0 16px 24px;
      --clear-button-margin: 0 0 16px;
      --list-chips-padding: 0 24px 0 0;
      --list-chips-gap: 8px 4px;
    }

  .DataList_size_m {
      --popover-chips-padding: 16px 0 16px 20px;
      --clear-button-margin: 0 0 16px;
      --list-chips-padding: 0 20px 0 0;
      --list-chips-gap: 8px 4px;
    }

  .DataList_size_s {
      --popover-chips-padding: 12px 0 12px 16px;
      --clear-button-margin: 0 0 12px;
      --list-chips-padding: 0 16px 0 0;
      --list-chips-gap: 4px 4px;
    }

  .DataList_size_xs {
      --popover-chips-padding: 8px 0 8px 12px;
      --clear-button-margin: 0 0 8px;
      --list-chips-padding: 0 12px 0 0;
      --list-chips-gap: 4px 4px;
    }

  .DataList_size_2xs {
      --popover-chips-padding: 8px 0 8px 12px;
      --clear-button-margin: 0 0 8px;
      --list-chips-padding: 0 12px 0 0;
      --list-chips-gap: 4px 4px;
    }
