@import "carbon-components/scss/globals/scss/vars";
@import "carbon-components/scss/globals/scss/helper-mixins";
@import "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";

@mixin overflow-menu-disabled {
  .#{$prefix}--overflow-menu:disabled,
  .#{$prefix}--overflow-menu:disabled:hover {
    background-color: transparent;
    cursor: not-allowed;
  }

  .#{$prefix}--overflow-menu:disabled .#{$prefix}--overflow-menu__icon,
  .#{$prefix}--overflow-menu:disabled:hover .#{$prefix}--overflow-menu__icon {
    fill: $disabled-02;
  }

  .#{$prefix}--overflow-menu:disabled::after,
  .#{$prefix}--overflow-menu:disabled:hover::after {
    opacity: 0;
  }
}

@include exports('overflow-menu-disabled') {
  @include overflow-menu-disabled;
}

/// Left/right icon support for overflow menu items (non-standard Carbon layout).
/// @access private
/// @group components
@mixin overflow-menu-option-icons {
  .#{$prefix}--overflow-menu-options__option-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;

    // Follow the button text color across hover, danger, and disabled states.
    svg {
      fill: currentColor;
    }
  }

  .#{$prefix}--overflow-menu-options__option-icon--left {
    margin-right: $carbon--spacing-03;
  }

  .#{$prefix}--overflow-menu-options__option-icon--right {
    margin-left: auto;
    padding-left: $carbon--spacing-05;
  }

  // Let the text region grow so the right icon pins to the edge while the text truncates.
  .#{$prefix}--overflow-menu-options__btn
    .#{$prefix}--overflow-menu-options__option-content:not(:only-child) {
    flex: 1;
    min-width: 0;
  }
}

@include exports('overflow-menu-option-icons') {
  @include overflow-menu-option-icons;
}

/// Extra-small overflow menu (Carbon React size="xs", 24px).
/// v10 only ships sm/md/lg. Mirrors the v10 `--sm` rules.
/// @access private
/// @group components
@mixin overflow-menu-xs {
  .#{$prefix}--overflow-menu--xs {
    width: to-rem(24px);
    height: to-rem(24px);
  }

  .#{$prefix}--overflow-menu-options--xs.#{$prefix}--overflow-menu-options {
    &[data-floating-menu-direction='bottom']::after,
    &[data-floating-menu-direction='top']::after {
      width: to-rem(24px);
    }

    &[data-floating-menu-direction='left']::after,
    &[data-floating-menu-direction='right']::after {
      height: to-rem(24px);
    }
  }

  .#{$prefix}--overflow-menu-options--xs
    .#{$prefix}--overflow-menu-options__option {
    height: to-rem(24px);
  }
}

@include exports('overflow-menu-xs') {
  @include overflow-menu-xs;
}