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

$sizes: 's', 'm', 'l';
$typography: (
  's': (
    'label': styles-tokens-dropList.$sans-body-s,
    'caption': styles-tokens-dropList.$sans-body-s,
    'description': styles-tokens-dropList.$sans-body-s,
    'separator': styles-tokens-dropList.$light-label-m,
  ),
  'm': (
    'label': styles-tokens-dropList.$sans-body-m,
    'caption': styles-tokens-dropList.$sans-body-s,
    'description': styles-tokens-dropList.$sans-body-s,
    'separator': styles-tokens-dropList.$light-label-l,
  ),
  'l': (
    'label': styles-tokens-dropList.$sans-body-l,
    'caption': styles-tokens-dropList.$sans-body-m,
    'description': styles-tokens-dropList.$sans-body-m,
    'separator': styles-tokens-dropList.$light-label-l,
  ),
);

.headline {
  display: flex;
}

.label {
  overflow: hidden;
  flex: 1;
  color: styles-tokens-dropList.$sys-neutral-text-main;
}

.caption {
  overflow: hidden;
  display: flex;
  align-items: center;

  color: styles-tokens-dropList.$sys-neutral-text-light;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.description {
  color: styles-tokens-dropList.$sys-neutral-text-support;
}

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

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

        display: flex;
        align-items: center;
      }
      .caption {
        @include styles-tokens-dropList.composite-var($typography, $size, 'caption');
      }
      .description {
        @include styles-tokens-dropList.composite-var($typography, $size, 'description');
      }
    }
  }

  &[data-disabled] {
    .label,
    .description,
    .caption {
      color: styles-tokens-dropList.$sys-neutral-text-disabled;
    }
  }
}