@import '../../../../styles/common';
@import '../../variables';

$difference-between-touch-area-and-backdrop: control-height() -
  control-slim-height();

.MenuAction {
  @include unstyled-button;
  @include text-style-body;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 $menu-action-padding-x;
  min-height: control-height();
  text-decoration: none;
  color: color('ink', 'light');

  &:hover,
  &:active {
    color: color('ink');

    .IconWrapper {
      @include recolor-icon(color('ink'), color('white'));
    }
  }

  &:focus,
  &:active {
    &::after {
      background: plain-button-background();
    }
  }

  &::after {
    content: '';
    position: absolute;
    top: 0.5 * $difference-between-touch-area-and-backdrop;
    right: spacing(extra-tight);
    left: spacing(extra-tight);
    display: block;
    height: control-slim-height();
    border-radius: border-radius();
    background: transparent;
    will-change: background;
    transition-property: background;
    transition-duration: duration();
    transition-timing-function: easing();
  }

  &.disabled {
    color: color('ink', 'lightest');
    cursor: default;
    pointer-events: none;

    .IconWrapper {
      @include recolor-icon(color('ink', 'lightest'));
    }
  }
}

.ContentWrapper {
  display: flex;
  align-items: center;
}

.IconWrapper {
  @include recolor-icon(color('ink', 'lighter'), color('white'));
  display: inline-block;

  &:first-child {
    margin-right: spacing(extra-tight);
  }

  &:last-child {
    margin-left: spacing(extra-tight);

    // This compensates for the disclosure icon, which is substantially
    // inset within the viewbox (and makes it look like there is too much
    // spacing on the right of the button)
    margin-right: -3px;
  }

  &.disabled {
    @include recolor-icon(color('ink', 'lightest'));
  }
}
