@use "../../style/variables" as *;
@use "mixin" as *;

/* stylelint-disable custom-property-pattern */

.#{$prefix}-menu-sub {
  position: relative;
  list-style: none;

  .#{$prefix}-menu-item,
  &__title {
    width: 100%;
  }

  .#{$prefix}-popup__wrapper {
    display: block;
  }

  &__list {
    margin: 0;
    min-width: 100%;
    list-style: none;
    padding-left: 0;
    white-space: nowrap;

    > .#{$prefix}-menu-item,
    > .#{$prefix}-menu-sub,
    > .#{$prefix}-menu-item-group {
      margin-top: 4px;
    }
  }

  &__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  &__extra {
    display: inline-flex;
    align-items: center;
  }

  &__arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 180ms ease;
    margin-left: var(--_menu-sub-arrow-margin-start);
    color: inherit;

    &_reverse {
      transform: rotate(180deg);
    }

    &_right {
      transform: rotate(-90deg);
    }
  }

  &__popup_theme-dark {
    --ty-popup-dark-bg: var(--ty-menu-dark-popup-bg, var(--ty-menu-popup-bg, var(--ty-color-bg-container)));
    --ty-popup-color-dark: var(--ty-menu-dark-overlay-item-color, var(--ty-color-text));
    --ty-popup-shadow: var(--ty-menu-popup-shadow, 0 16px 40px rgb(0 0 0 / 28%));
  }

  &__popup_theme-light {
    --ty-popup-light-bg: var(--ty-menu-light-popup-bg, #fff);
    --ty-popup-color-light: var(--ty-menu-light-overlay-item-color, var(--ty-menu-light-color, #32325d));
    --ty-popup-shadow: var(--ty-menu-popup-shadow, var(--ty-shadow-popup));
  }
}