@import '../../../ng-aquila/src/shared-styles/index';

:host {
  display: flex;
  align-items: center;
  background: v(menu-button-background-color);
  color: v(menu-button-text-color);
  appearance: none;
  outline: none;
  box-shadow: none;
  border: none;
  margin: 0;
  cursor: pointer;
  line-height: nx-line-height(2xs);
  font-weight: nx-font-weight(regular);
  font-size: nx-font-size(2xs);
  width: 100%;
  transition:
    all 0.2s ease,
    padding 0 none;
  text-decoration: none;
  padding: nx-spacer(m);

  &:hover {
    background: v(menu-button-hover-background-color);
  }

  &.is-expanded {
    font-weight: nx-font-weight(bold);
    background: v(menu-button-expanded-background-color);
    color: v(menu-button-expanded-text-color);
    border-color: v(menu-button-expanded-border-color);

    .nx-menu-button__expand-icon {
      transform: rotateZ(180deg);
    }
  }

  &.nx-menu-button--nested {
    background: v(menu-button-nested-background-color);

    &.is-expanded {
      background: v(menu-button-nested-expanded-background-color);
      border-color: v(menu-button-nested-expanded-border-color);
      color: v(menu-button-nested-expanded-color);
    }
  }

  // don't show inner dotted border on firefox
  &::-moz-focus-inner {
    border: 0;
  }

  &.cdk-keyboard-focused {
    @include focus-style-inset;
    border-radius: 2 * nx-border-radius(s);
    border: none;
  }
}

.nx-menu-button__expand-icon {
  display: flex;
  justify-content: center;
  transition: all 0.2s ease;
  transform: rotateZ(0);
  width: nx-spacer(s);
  height: nx-spacer(m);
  margin-right: nx-spacer(2xs);
  flex: 0 0 auto;
  font-size: nx-font-size(s);

  :host-context([dir='rtl']) & {
    margin-right: initial;
    margin-left: nx-spacer(2xs);
  }
}

.nx-menu-button__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  text-align: left;
  line-height: 1;
  padding: nx-spacer(3xs) 0;

  :host-context([dir='rtl']) & {
    text-align: right;
  }
}

::ng-deep .nx-menu-button__icon {
  margin-right: nx-spacer(s);
  height: nx-spacer(m);
  font-weight: nx-font-weight(regular);
  flex: 0 0 auto;

  :host-context([dir='rtl']) & {
    margin-right: initial;
    margin-left: nx-spacer(s);
  }
}

@media screen and (forced-colors: active) {
  :host,
  :host.is-expanded,
  :host.nx-menu-button--nested,
  :host.nx-menu-button--nested.is-expanded {
    forced-color-adjust: none;
    color: buttonText;
    background-color: buttonFace;
  }

  :host:hover,
  :host.nx-menu-button--nested.is-expanded:hover {
    background-color: highlight;
    color: highlightText;
    border-bottom-color: CanvasText;
  }
}
