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

:host {
  display: inline-block;
}

:host(.nx-rating--negative) {
  .nx-rating__label,
  .nx-rating__icon {
    color: v(negative);
  }
}

:host(.nx-rating--disabled) {
  cursor: not-allowed;
  outline: none;

  .nx-rating__label {
    color: v(rating-disabled-label-color);
  }

  .nx-rating__icon {
    color: v(rating-disabled-icon-color);
    cursor: not-allowed;
  }
}

.nx-rating__container {
  display: flex;
}

.nx-rating__label {
  display: flex;
  @include type-style(rating-label);
  color: v(rating-label-color);
}

.nx-rating__label--end {
  margin-left: auto;

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

.rating-label {
  line-height: 0;

  &.margin-s {
    margin-right: nx-spacer(2xs);
  }
  &.margin-m {
    margin-right: nx-spacer(xs);
  }
  &.margin-l {
    margin-right: nx-spacer(s);
  }

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

.nx-rating__icon {
  font-size: v(rating-icon-size-l);
  color: var(--iconColor, v(rating-icon-color));
  width: auto;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;

  &.nx-icon--s {
    font-size: v(rating-icon-size-s);
  }
  &.nx-icon--m {
    font-size: v(rating-icon-size-m);
  }
  &.nx-icon--l {
    font-size: v(rating-icon-size-l);
  }
}

:host(:not(.nx-rating--negative)) {
  .nx-rating__icon.nx-rating__icon--selected {
    &:hover {
      color: v(hover-primary);
    }
    &:active {
      color: v(active-primary);
    }
  }
}

.rating-label:last-child {
  margin-right: 0;

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

// ARIA styles
.nx-rating__icon.cdk-keyboard-focused {
  @include focus-style;
  border-radius: nx-border-radius(s);
}

@media screen and (forced-colors: active) {
  :host,
  :host.nx-rating--negative {
    .nx-rating__icon {
      color: buttonText;
    }

    .nx-rating__label {
      forced-colors-adjust: none; // fixes the broken focus styling
      color: CanvasText;
    }
  }

  :host(.nx-rating--disabled) {
    .nx-rating__icon {
      color: GrayText;
    }

    .nx-rating__label {
      color: CanvasText;
    }
  }
}

.nx-rating__input {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

// focus style
.nx-rating__input.cdk-keyboard-focused + label nx-icon {
  @include focus-style;
  border-radius: nx-border-radius(s);
}
