@use 'sass:map';

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

$menu: () !default;
$menu: map.merge(
  (
    bg-color: transparent,
    bg-color-hover: value('fill-color-hover'),
    bg-color-selected: value('color-primary-opacity-8'),
    b-color: value('border-color-light-2'),
    d-color: value('border-color-light-1'),
    o-color: value('color-primary-opacity-6'),
    item-x-span: 8px,
    item-y-span: 4px,
    label-color: value('content-color-base'),
    label-color-hover: value('menu-label-color'),
    label-color-visible: value('color-primary-base'),
    label-color-selected: value('color-primary-base'),
    label-color-disabled: value('content-color-disabled'),
    marker-bg-color: value('color-primary-base'),
    popper-bg-color: value('bg-color-base'),
    popper-b-color: value('border-color-light-2'),
    popper-radius: value('radius-base'),
    popper-s-color: value('shadow-color-base'),
    group-color: value('content-color-secondary'),
    group-span: 6px,
    indent-width: 20px
  ),
  $menu
);

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

  @mixin define-menu-style($style-map) {
    @include define-preset-style('menu', $style-map);
  }

  @include basis {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: value('menu-bg-color');
    border-inline-end: value('border-shape') value('menu-b-color');
    outline: 0;
    transition:
      width value('transition-base'),
      value('transition-shadow');
  }

  &--horizontal {
    flex-direction: row;
    width: auto;
    border-inline-end: 0;
  }

  &::before,
  &::after {
    display: table;
    content: '';
  }

  &::after {
    clear: both;
  }

  &--reduced {
    width: calc(value('menu-indent-width') * 2 + 24px);
  }

  &__popper {
    padding: 0;
    transform-origin: 0 0 !important;

    @include rtl {
      transform-origin: 100% 0 !important;
    }

    &--drop {
      padding: 5px 0;
    }
  }

  $self: #{&};
  $popper: #{&}__popper;
  $item: #{&}__item;
  $label: #{&}__label;

  &__item {
    padding: 0;
    margin-top: value('menu-item-y-span');
    list-style: none;
    background-color: transparent !important;

    #{$self} > &:first-child {
      margin-top: 0;
    }

    & > .#{$namespace}-tooltip {
      height: 100%;

      & > .#{$namespace}-tooltip__trigger {
        display: block;
        height: 100%;
      }
    }

    #{$self}--horizontal & {
      padding: 0;
      padding-inline: calc(#{value('menu-item-x-span')} * 0.5);
      margin-top: 0;
    }

    #{$popper} & {
      padding: 0;

      &:first-child {
        margin-top: 0;
      }
    }
  }

  &__label {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    padding-inline: 20px;
    color: value('menu-label-color');
    cursor: pointer;
    user-select: none;
    background-color: value('menu-bg-color');
    outline: 0;
    transition:
      padding-inline-start value('transition-base'),
      value('transition-color'),
      value('transition-background'),
      value('transition-shadow');

    &::after {
      position: absolute;
      inset-inline-start: -1px;
      top: 0;
      bottom: 0;
      display: block;
      width: 3px;
      content: '';
      background-color: value('menu-marker-bg-color');
      opacity: 0%;
      transition: value('transition-opacity');

      #{$popper} & {
        display: none;
      }
    }

    &--marker-left::after {
      inset-inline: 0 auto;
    }

    #{$self}--horizontal & {
      &::after {
        inset: auto 0;
        width: auto;
        height: 2px;
      }

      &--marker-top::after {
        top: 0;
      }

      &--marker-bottom::after {
        bottom: 0;
      }
    }

    &--marker-none::after {
      display: none;
    }

    &:hover {
      color: value('menu-label-color-hover');
    }

    &:hover,
    #{$popper} #{$item}--group-visible > & {
      background-color: value('menu-bg-color-hover');

      #{$self}--horizontal & {
        background-color: value('menu-bg-color');

        &::after {
          opacity: 100%;
        }
      }

      #{$popper} & {
        background-color: value('menu-bg-color-hover');
      }

      #{$item}--disabled &::after {
        opacity: 0%;
      }
    }

    #{$item}--son-selected > & {
      color: value('menu-label-color-selected');

      #{$self}--horizontal &::after {
        opacity: 100%;
      }

      #{$item}--disabled &::after {
        opacity: 0%;
      }
    }

    #{$item}--selected &,
    #{$item}--group-visible > & {
      #{$self}--horizontal & {
        &::after {
          opacity: 100%;
        }
      }
    }

    &:focus-visible {
      box-shadow: 0 0 0 2px value('menu-o-color');
    }

    #{$item}--selected & {
      color: value('menu-label-color-selected');
      background-color: value('menu-bg-color-selected');

      &::after {
        opacity: 100%;
      }

      #{$self}--horizontal > &,
      #{$self}--horizontal :not(#{$popper}) & {
        background-color: value('menu-bg-color');
      }
    }

    #{$item}--disabled & {
      &,
      &:hover {
        color: value('menu-label-color-disabled');
        cursor: not-allowed;
        background-color: value('menu-bg-color');
      }
    }
  }

  &__icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    margin-inline-end: 10px;
    transition: margin value('transition-base');

    #{$self}--reduced & {
      margin: 0;
      margin-inline: 5px;
    }

    #{$self}--horizontal & {
      margin-inline-end: 6px;
    }

    #{$popper} & {
      margin-inline: -2px 6px;
    }
  }

  &__title {
    display: inline-block;
    width: calc(100% - 34px);
    overflow: hidden;
    white-space: nowrap;
    opacity: 100%;
    transition:
      width value('transition-base'),
      value('transition-opacity');

    &--in-group {
      padding-inline-end: 20px;
    }

    #{$self}--reduced & {
      width: 0;
      pointer-events: none;
      opacity: 0%;
    }

    #{$self}--horizontal & {
      width: auto;
    }

    #{$self}--horizontal &--in-group {
      padding-inline-start: 12px;
    }

    #{$popper} & {
      width: auto;
      opacity: 100%;
    }

    #{$item}--no-icon & {
      width: 100%;

      #{$self}--horizontal & {
        margin-inline-end: 0;
      }
    }
  }

  &__arrow {
    position: absolute;
    inset-inline-end: 22px;
    opacity: 100%;
    transition: value('transition-opacity'), value('transition-transform');

    &--visible {
      transform: rotate(180deg);
    }

    #{$self}--reduced & {
      pointer-events: none;
      opacity: 0%;
    }

    #{$self}--dropdown &,
    #{$label}--in-popper > & {
      inset-inline-end: 12px;
    }

    #{$self}--horizontal & {
      position: relative;
      inset-inline-end: auto;
      margin-inline: 6px 0;
      transform: rotate(0);

      &--visible {
        transform: rotate(180deg);
      }
    }

    #{$popper} & {
      inset-inline-end: 12px;
      opacity: 100%;
      transform: rotate(-90deg);

      @include rtl {
        transform: rotate(90deg);
      }
    }
  }

  &__list {
    padding-inline-start: 0;
    margin: 0;

    @include clear-both;

    #{$popper} & {
      display: inline-flex;
      flex-direction: column;
      min-width: 70px;
      padding: 5px 0;
      user-select: none;
      background-color: value('menu-popper-bg-color');
      border: value('border-shape') value('menu-popper-b-color');
      border-radius: value('menu-popper-radius');
      box-shadow: value('shadow-shape') value('menu-popper-s-color');
    }
  }

  &__rest-handler {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    padding-inline: 20px;
    cursor: pointer;
    background-color: value('menu-bg-color');
    transition: value('transition-color'), value('transition-background');

    &--selected {
      color: value('menu-label-color-hover');
    }
  }

  @at-root {
    &-group {
      margin-top: value('menu-group-span');
      white-space: nowrap;
      list-style: none;
      user-select: none;

      #{$self} > &:first-child,
      #{$popper} &:first-child {
        margin-top: 0;
      }

      &__label {
        position: relative;
        color: value('menu-group-color');
        background-color: value('menu-bg-color');

        &::before {
          position: absolute;
          inset-inline-start: 50%;
          top: 50%;
          width: 24px;
          height: 1px;
          content: '';
          background-color: value('menu-d-color');
          opacity: 0%;
          transition: value('transition-opacity');
          transform: translate(-50%, -50%);
        }
      }

      &__title {
        display: inline-block;
        padding: 8px 20px;
        font-size: value('font-size-secondary');
        transition: value('transition-opacity');

        #{$self}--horizontal & {
          display: none;
        }

        #{$popper} & {
          display: inline-block;
        }
      }

      &__list {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0;

        #{$self}--horizontal & {
          flex-direction: row;
          width: auto;
        }

        #{$popper} & {
          flex-direction: column;
        }
      }

      #{$self}--reduced & {
        &__label {
          &::before {
            opacity: 100%;
          }
        }

        &__title {
          opacity: 0%;
        }
      }
    }
  }
}