@st-namespace 'Ratings-deprecated-st-css';
@property st-global(--wut-error-color);

:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, fallback, font, unit;
}

:import {
    -st-from: "../../common/palette.st.css";
    -st-named: errorColor as defaultErrorColor, focusRing;
}

:import {
    -st-from: '../internal/ErrorMessageWrapper/ErrorMessageWrapper.deprecated.st.css';
    -st-default: ErrorMessageWrapper;
}

:vars {
    /*Defaults*/
    DefaultTextColor: color-5;
    DefaultColor: color-8;
    DefaultEmptyColor: color-3;
    DisabledColor: color-3;
    IconLargeGap: 8px;
    DefaultFont: font("{theme: 'Body-S', size: '14px', lineHeight: '1.4em'}");
    LargeFont: font("{theme: 'Heading-M', size: '32px', lineHeight: '1.25em'}");
    DefaultLabelFont: font("{theme: 'Body-M', size: '14px', lineHeight: '1.4em'}");
    DefaultLabelColor: color-5;
    DefaultErrorColor: value(defaultErrorColor);
}

:vars {
    /* Overrides */
    TextColor: --overridable;
    IconColor: --overridable;
    IconEmptyColor: --overridable;
    LabelFont: --overridable;
    LabelColor: --overridable;
    /*
      The color representing an error
      @default #DF3131
    */
    ErrorColor: --overridable;
    /*
      A minimum height for the error message element
    */
    ErrorMessageMinHeight: --overridable;
}

/*
 * Text color
 * @type color
 */
@property st-global(--wix-ui-tpa-ratings-text-color);

/*
 * Icon color
 * @type color
 */
@property st-global(--wix-ui-tpa-ratings-icon-color);

/*
 * Icon empty color
 * @type color
 */
@property st-global(--wix-ui-tpa-ratings-icon-empty-color);


/*
 * Label font
 * @type font
 */
@property st-global(--wix-ui-tpa-ratings-label-font);

/*
 * Label color
 * @type color
 */
@property st-global(--wix-ui-tpa-ratings-label-color);

/*
 * The color representing an error
 * @type color
 * @default #DF3131
*/
@property st-global(--wix-ui-tpa-ratings-error-color);

/*
 * A minimum height for the error message element
 * @type size
*/
@property st-global(--wix-ui-tpa-ratings-error-message-min-height);

:vars {
    mainErrorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
}

.root {
    -st-states: disabled, error, hasErrorMessage, showInputOptions, inputOptionSelected, size( enum(small, large) ), mode( enum(input, display) ), layout( enum(aside, bottom) ), labelPlacement( enum(top, aside) );
    -st-extends: ErrorMessageWrapper;
}

.root:error {
    -st-mixin: ErrorMessageWrapper(
            ErrorColor value(mainErrorColor),
            MinMessageHeight unit(value(ErrorMessageMinHeight), px)
    );
}

.root:hasErrorMessage .container {
    vertical-align: bottom;
}

.container, .innerWrapper {
    display: flex;
}

.root:labelPlacement(top) .container {
   flex-direction: column;
   align-items: flex-start;
}

.root:labelPlacement(aside) .container {
   flex-direction: row;
   align-items: center;
}

.root:layout(aside) .innerWrapper {
    flex-direction: row;
    align-items: center;
}

.root:layout(bottom) .innerWrapper {
    flex-direction: column;
    align-items: flex-start;
}

.root:layout(bottom):error:hasErrorMessage:not(:hover):not(:inputOptionSelected) .innerWrapper {
    flex-direction: row;
    align-items: center;
}

/* ------ States ------ */

/* SIZE */
.root:size(large) .iconList .icon:not(:last-child) {
   padding-right: value(IconLargeGap);
}

.root .iconList {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    direction: ltr;
    cursor: pointer;
}

/* ------ Label layouts ------ */

.label {
    color: color(fallback(value(LabelColor), value(DefaultLabelColor)));
    font: fallback(font(value(LabelFont)), font(value(DefaultLabelFont)));
}

.root:labelPlacement(top) .label {
   margin-bottom: 8px;
}

.root:labelPlacement(aside) .label {
   margin-inline-end: 12px;
}

.root:size(large) .inputOption,
.root:size(large) .ratingInfo {
    font: value(LargeFont);
}

/* DISABLED */
.root:hover:not(:disabled):not(:mode(display)) .icon {
    color: color(fallback(value(IconColor), value(DefaultColor)));
}

.root:disabled .icon {
    color: color(value(DisabledColor));
}

.root:disabled,
.root:disabled {
    cursor: default;
    pointer-events: none;
}

/* ERROR */
.root:error .icon {
    color: var(--wut-error-color, value(DefaultErrorColor)) !important;
}

.root:error .iconList:hover .icon {
    color: color(fallback(value(IconColor), value(DefaultColor))) !important;
}

/* MODE */
.root:mode(display),
.root:mode(display) .icon {
    cursor: default;
    pointer-events: none;
}

.root:mode(display) .icon {
    color: color(fallback(value(IconEmptyColor), value(DefaultEmptyColor)));
}

/* ------ /States -------*/

.icon {
    -st-states: checked;
    line-height: 0;
}

:global(#SITE_CONTAINER.focus-ring-active) .icon:focus-within {
    -st-mixin: focusRing();
}

.icon,
.root:mode(display) .iconList:not(.empty) .icon {
    color: color(fallback(value(IconColor), value(DefaultColor)));
}

.root:mode(display) .iconList .icon:checked ~ .icon {
    color: color(fallback(value(IconEmptyColor), value(DefaultEmptyColor)));
}

.root:size(large):layout(aside):mode(input):showInputOptions .icon svg {
    margin: 4px 0;
}

/* ----- TEXT ------ */
.labelList {
    margin: 0 12px;
}

.root:size(large):layout(aside) .labelList {
    margin: 0 24px;
}

.root:layout(bottom) .labelList {
    margin: 8px 0 0;
}

.root:layout(bottom):size(large) .labelList {
    margin: 20px 0 0;
}

.inputOption {
    font: value(DefaultFont);
    color: color(fallback(value(TextColor), value(DefaultTextColor)));
}

.root:not(:disabled):not(:mode(display)) .inputOption.inputOptionCurrent {
    display: inline-block;
}

/* ------ /inputOptions ------ */
.ratingInfo {
    transform: translateY(-2px);
    margin: 0 12px;

    font: value(DefaultFont);
    color: color(fallback(value(TextColor), value(DefaultTextColor)));
}

.root:size(large):layout(aside) .ratingInfo {
    margin: 0 24px;
}

.root:layout(bottom) .ratingInfo {
    transform: translateY(0);
    margin: 10px 0 0;

    width: 100%;
}

.root:layout(bottom):size(large) .ratingInfo {
    margin: 20px 0 0;
}

.partialIconContainer {
    position: relative;
}

.partialIconBackground {
    position: absolute;
    color: color(fallback(value(IconEmptyColor), value(DefaultEmptyColor)));
}

.partialIconOverlay {
    position: absolute;
    overflow: hidden;
    color: color(fallback(value(IconColor), value(DefaultColor)));
}

/* st-namespace-reference="../../../../src/components/Ratings/Ratings.deprecated.st.css" */