@st-import [ --wix-color-5, --wix-color-8, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@property st-global(--wut-error-color);
@st-import [ createColor, createFont, setVar, setColor ] from '../../common/formatters.st';
@st-import [ errorColor as defaultErrorColor, focusRing ] from '../../common/palette.st.css';
@st-import ErrorMessageWrapper from '../internal/ErrorMessageWrapper/ErrorMessageWrapper.st.css';
@st-import [ --wst-paragraph-2-color-rgb, --wst-links-and-actions-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
/*
 * 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);

.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:
    setColor(--wix-ui-tpa-error-message-wrapper-error-color, --wix-ui-tpa-ratings-error-color),
    setVar(--wix-ui-tpa-error-message-wrapper-min-message-height, --wix-ui-tpa-ratings-error-message-min-height);
}

.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: 8px;
}

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

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

.label {
  color: createColor(--wix-ui-tpa-ratings-label-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  -st-mixin: createFont(--wix-ui-tpa-ratings-label-font, 'Body-M', '{ "line-height": "1.4em", "size": "14px" }');
}

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

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

.root:size(large) .inputOption,
.root:size(large) .ratingInfo {
  -st-mixin: createFont(null, 'Heading-M', '{ "line-height": "1.25em", "size": "32px" }');
}

/* DISABLED */
.root:hover:not(:disabled):not(:mode(display)) .icon {
  color: createColor(--wix-ui-tpa-ratings-icon-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
}

.root:disabled .icon {
  color: rgb(var(--wix-color-29));
}

.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: createColor(--wix-ui-tpa-ratings-icon-color, var(--wix-color-8)) !important;
}

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

.root:mode(display) .icon {
  color: createColor(--wix-ui-tpa-ratings-icon-empty-color, var(--wix-color-29));
}

/* ------ /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: createColor(--wix-ui-tpa-ratings-icon-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
}

.root:mode(display) .iconList .icon:checked ~ .icon {
  color: createColor(--wix-ui-tpa-ratings-icon-empty-color, var(--wix-color-29));
}

.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 {
  -st-mixin: createFont(null, 'Body-S', '{ "line-height": "1.4em", "size": "14px" }');
  color: createColor(--wix-ui-tpa-ratings-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

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

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

  -st-mixin: createFont(null, 'Body-S', '{ "line-height": "1.4em", "size": "14px" }');
  color: createColor(--wix-ui-tpa-ratings-text-color, var(--wix-color-5));
}

.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: createColor(--wix-ui-tpa-ratings-icon-empty-color, var(--wix-color-29));
}

.partialIconOverlay {
  position: absolute;
  overflow: hidden;
  color: createColor(--wix-ui-tpa-ratings-icon-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
}

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