@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);
}
