@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

.listContainer {
  display: flex;
  flex-direction: column;

  height: 100%;
  margin: 0;
  padding: 0;

  &:focus-visible {
    border: none;
    outline: none;

    &[data-active] {
      @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);

      outline-color: styles-tokens-element.$sys-available-complementary;

      * {
        cursor: inherit;
      }
    }
  }

  li,
  ul {
    list-style-type: none;
  }
}

.wrapper {
  position: relative;

  overflow: hidden;
  display: block;

  box-sizing: border-box;
  height: 100%;

  &:has(.listContainer:focus-visible) {
    @include styles-tokens-element.outline-inside-var(styles-tokens-element.$container-focused-s);

    outline-color: styles-tokens-element.$sys-available-complementary;
  }
  li,
  ul {
    list-style-type: none;
  }
}

.scrollContainerS {
  height: auto;
  max-height: calc(styles-tokens-element.$dimension-1m * 32); // 256px
}

.scrollContainerM {
  height: auto;
  max-height: calc(styles-tokens-element.$dimension-1m * 40); // 320px
}

.scrollContainerL {
  height: auto;
  max-height: calc(styles-tokens-element.$dimension-1m * 48); // 384px
}