/* stylelint-disable at-rule-empty-line-before */
/* stylelint-disable scss/operator-no-newline-after */

@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';

.checkbox {
  display: inline-flex;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: styles-tokens-dropList.$dimension-3m;
  height: styles-tokens-dropList.$dimension-3m;
}

.beforeContent {
  display: inline-flex;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: styles-tokens-element.$icon-s;
  height: styles-tokens-element.$icon-s;

  color: styles-tokens-dropList.$sys-neutral-text-light;

  svg {
    max-width: 100%;
    max-height: 100%;
  }
}

.expandableIcon {
  display: flex;
  align-items: center;
  color: styles-tokens-dropList.$sys-neutral-text-light;
  fill: currentColor;
}

.markerContainer {
  @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', 'marker-container');

  pointer-events: none;

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

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

  &:before {
    @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', 'marker');

    content: '';
    display: block;
    height: 100%;
  }
}

$level: var(--level, 0);

.droplistItem {
  width: 100%;

  @each $size in $sizes {
    &[data-size='#{$size}'] {
      $nestingLevelOffset: styles-tokens-dropList.simple-var(
        styles-tokens-dropList.$drop-list,
        'item',
        $size,
        'nesting-level-offset',
        'width'
      );

      $nestingLevelGapCompensator: styles-tokens-dropList.simple-var(
        styles-tokens-dropList.$drop-list,
        'item',
        $size,
        'nesting-level-gap-compensator',
        'width'
      );

      $itemPaddingLeft: styles-tokens-dropList.simple-var(
        styles-tokens-dropList.$drop-list,
        'item',
        $size,
        'container',
        'padding-left'
      );

      $itemGap: styles-tokens-dropList.simple-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container', 'gap');

      &[data-level-one] {
        padding-left: calc($itemPaddingLeft + $nestingLevelGapCompensator + $itemGap);
      }

      &[data-level-more-one] {
        padding-left: calc(
          $itemPaddingLeft + $nestingLevelGapCompensator + $itemGap + ($level - 1) * $nestingLevelOffset
        );
      }

      .headline {
        @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'headline');
      }
    }
  }

  &[data-non-pointer] {
    cursor: inherit;
  }
}

.innerWrapper {
  &[data-disabled] {
    .expandableIcon {
      color: styles-tokens-dropList.$sys-neutral-text-disabled;
    }

    .beforeContent {
      opacity: styles-tokens-dropList.$opacity-a064;
    }

    .droplistItem {
      cursor: not-allowed;
    }
  }

  &[data-has-checked],
  &[data-checked] {
    &[data-variant='single'] {
      &::before {
        opacity: styles-tokens-dropList.$opacity-a008;
        background-color: styles-tokens-dropList.$sys-primary-accent-default;
      }

      &:hover {
        &::before {
          opacity: styles-tokens-dropList.$opacity-a016;
          background-color: styles-tokens-dropList.$sys-primary-accent-default;
        }
      }
    }

    .markerContainer:before {
      background-color: styles-tokens-dropList.$sys-primary-accent-default;
    }

    .droplistItem:focus-visible {
      &[data-variant='single'] {
        outline-color: styles-tokens-dropList.$sys-primary-accent-default;
      }
    }

    &[data-disabled] {
      .markerContainer:before {
        background-color: styles-tokens-dropList.$sys-neutral-text-disabled;
      }
    }
  }
}

.content {
  overflow: hidden;
  flex-grow: 1;
  flex-shrink: 1;
  box-sizing: border-box;
}