@import '../shared-styles/index';

:host(.nx-action) {
  display: block;
  @include type-style(action);
  appearance: none;
  outline: none;
  box-shadow: none;
  border: none;
  margin: 0;
  cursor: pointer;
  padding: nx-spacer(2xs) nx-spacer(s) nx-spacer(2xs) 0;
  width: 100%;
  transition:
    all 0.2s ease,
    padding 0 none;
  text-decoration: none;
  color: v(action-color);
  background-color: v(action-background-color);

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

  &.is-expanded {
    font-weight: nx-font-weight(bold);

    .nx-action__expand-icon {
      transform: rotateZ(90deg);
    }
  }

  &.is-expandable {
    .nx-action__wrapper::before {
      flex: 0 1 nx-spacer(2m);
      max-width: nx-spacer(2xs);
      min-width: nx-spacer(3xs);
    }
  }

  &.is-selected {
    color: v(action-selected-color);
    background-color: v(action-selected-background-color);
    font-weight: nx-font-weight(bold);
  }

  &.nx-tree-node--with-padding {
    .nx-action__wrapper::before {
      flex-shrink: 0;
    }
  }

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

  [dir='rtl'] & {
    padding: nx-spacer(2xs) 0 nx-spacer(2xs) nx-spacer(s);
  }
}

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

.nx-action__expand-icon {
  display: flex;
  justify-content: center;
  transition: all 0.2s ease;
  transform: rotateZ(0);
  margin-right: nx-spacer(2xs);
  margin-top: 3px;
  flex: 0 0 auto;
  font-size: v(action-expand-icon-size);

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

.nx-action__wrapper {
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    display: block;
    flex: 0 1 nx-spacer(2m);
    min-width: nx-spacer(s);
    height: 1em;
  }
}

.nx-action-icon__container {
  font-size: v(action-icon-size);
  padding-right: nx-spacer(s);
  flex: 0 0 auto;
  position: relative;
  justify-content: center;
  display: flex;
  margin-top: 2px;

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

::ng-deep .nx-action__icon {
  font-weight: nx-font-weight(regular);
}

// this is to overwrite if icon size s is used for the action icon (previously used in examples)
::ng-deep .nx-action__icon.nx-icon--s {
  font-size: inherit;
}

.nx-action__label {
  flex: 1 1 50%;
  text-align: left;
  word-break: break-word;

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

@media screen and (forced-colors: active) {
  :host(.nx-action) {
    &.is-selected,
    &:hover {
      forced-colors-adjust: none;
      background-color: highlight;
      color: highlightText;
      forced-color-adjust: preserve-parent-color;
      font-weight: nx-font-weight(regular);
    }
  }
}
