@use '../../style/variables' as *;

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

.#{$prefix}-dropdown {
  .#{$prefix}-menu,
  .#{$prefix}-menu-sub__list {
    --_menu-overlay-item-color: var(--ty-dropdown-item-color);
    --_menu-item-text-hover: var(--ty-dropdown-item-color);
    --_menu-item-text-open: var(--ty-dropdown-item-color);
    --_menu-overlay-item-hover-bg: var(--ty-dropdown-item-hover-bg);
    --_menu-popup-item-padding: var(--ty-dropdown-item-padding);

    padding: var(--ty-dropdown-menu-padding);

    .#{$prefix}-menu-item_active {
      background-color: transparent;
      color: var(--ty-dropdown-item-color);
    }

    .#{$prefix}-menu-item,
    .#{$prefix}-menu-sub__title {
      padding: var(--_menu-popup-item-padding);
      margin: 0;
    }
  }

  .#{$prefix}-menu:before {
    content: none;
  }

  .#{$prefix}-menu-item-group {
    &__title {
      padding: var(--ty-dropdown-group-title-padding);

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