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

$sizes: 's', 'm', 'l';

.itemWrapper {
  position: relative;
  min-width: 100%;
  margin: 0;
  padding: 0;

  &::before,
  &::after {
    pointer-events: none;
    content: '';

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: transparent;
  }

  &[data-disabled],
  &:disabled {
    cursor: not-allowed;
    background-color: transparent;
    outline: none;

    &::before {
      display: none;
    }

    &::after {
      cursor: not-allowed;
      background-color: transparent;
    }
  }

  &:not([data-inactive], [data-disabled]) {
    &[data-open],
    &[data-focused],
    &:focus-visible {
      &::before {
        opacity: styles-tokens-dropList.$opacity-a008;
        background-color: styles-tokens-dropList.$sys-neutral-accent-default;
      }
    }

    @media (hover: hover) {
      &:hover {
        &::before {
          opacity: styles-tokens-dropList.$opacity-a008;
          background-color: styles-tokens-dropList.$sys-neutral-accent-default;
        }
      }
    }
  }
}

.listItem {
  cursor: pointer;

  position: relative;

  display: flex;
  flex-direction: row;
  align-items: flex-start;

  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0;

  color: styles-tokens-dropList.$sys-neutral-text-main;
  text-align: start;

  appearance: unset;
  background-color: transparent;
  border: none;
  outline: none;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container');
    }
  }

  &:not([data-inactive], [data-disabled]) {
    &[data-focused],
    &:focus-visible {
      @include styles-tokens-dropList.outline-inside-var(styles-tokens-element.$container-focused-s);
    }
  }
}