@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$option: () !default;
$option: map.merge(
  (
    color: value('content-color-base'),
    // color-hover: value('option-color'),
    color-hitting: value('color-primary-base'),
    color-selected: value('color-primary-base'),
    color-disabled: value('fill-color-disabled'),
    bg-color: transparent,
    bg-color-hover: value('fill-color-humble'),
    bg-color-hitting: value('option-bg-color-hover'),
    bg-color-selected: value('color-primary-opacity-8'),
    bg-color-disabled: value('option-bg-color'),
    d-color: value('border-color-light-2'),
    divider: value('border-shape') value('option-d-color'),
    group-color: value('content-color-secondary'),
    group-font-size: value('font-size-secondary'),
    label-v-padding: 5px,
    label-h-padding: 16px,
    min-height: 32px
  ),
  $option
);

.#{$namespace}-option {
  &-vars {
    @include define-preset-values('option', $option);
  }

  $label-v-padding: value('option-label-v-padding');
  $label-h-padding: value('option-label-h-padding');
  $label-padding: $label-v-padding $label-h-padding;

  & {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: value('option-min-height');
    padding: $label-padding;
    color: value('option-color');
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    background-color: value('option-bg-color');
    transition: value('transition-color'), value('transition-background');
  }

  &:not(#{&}--no-hover):hover {
    // color: value('option-color-hover');
    background-color: value('option-bg-color-hover');
  }

  &--hitting {
    color: value('option-color-hitting');
    background-color: value('option-bg-color-hitting');
  }

  &--selected {
    &,
    &:hover,
    &:not(#{&}--no-hover):hover {
      color: value('option-color-selected');
      background-color: value('option-bg-color-selected');
    }
  }

  &--disabled {
    cursor: not-allowed;

    &,
    &:hover {
      color: value('option-color-disabled');
      background-color: value('option-bg-color');
    }
  }

  &--divided {
    position: relative;
    margin-bottom: calc($label-v-padding * 2);

    &::after {
      position: absolute;
      bottom: calc(#{$label-v-padding} * -1 - 0.5px);
      display: block;
      width: 100%;
      height: 0;
      margin: 0;
      margin-inline: calc(#{$label-h-padding} * -1);
      pointer-events: none;
      content: '';
      border-bottom: value('option-divider');
    }
  }

  @at-root {
    &-group {
      white-space: nowrap;
      list-style: none;
      user-select: none;

      &__label {
        padding: $label-padding;
        font-size: value('option-group-font-size');
        color: value('option-group-color');
      }

      &__list {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0;
      }

      &--divided &__list {
        padding-bottom: 10px;

        &::after {
          position: absolute;
          right: 0;
          bottom: $label-v-padding;
          left: 0;
          display: block;
          height: 1px;
          font-size: value('option-group-font-size');
          content: '';
          background-color: value('option-d-color');
        }
      }
    }
  }
}