@st-namespace 'RatingsInput-deprecated-st-css';
:import {
  -st-from: "../../common/formatters.st";
  -st-named: color, font, fallback;
}

:import {
  -st-from: "../../common/mixins.st.css";
  -st-named: sr-only;
}

:import {
  -st-from: "../../common/fonts.st.css";
  -st-named: fontFamily;
}

: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;
}

/* Defaults*/
:vars {
  DefaultIconColor: color-8;
  DefaultLabelFont: font("{theme: 'Body-M', size: '14px', lineHeight: '1.4em'}");
  DefaultLabelColor: color-5;
  DefaultReactionLabelFontFamilySmall: value(fontFamily);
  DefaultReactionLabelFontFamilyLarge: font("{theme: 'Heading-M', size: '32px', lineHeight: '1.25em'}");
  DefaultReactionLabelColor: color-5;
  DefaultErrorColor: value(defaultErrorColor);
}

/* Overrides */
:vars {
  IconColor: --overridable;
  LabelFont: --overridable;
  LabelColor: --overridable;
  ReactionLabelFontFamily: --overridable;
  ReactionLabelColor: --overridable;
  /*
  Color representing an error
  @default #DF3131
  */
  ErrorColor: --overridable;
}

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

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

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

/*
 * Reaction font
 * @type font
 */
@property st-global(--wix-ui-tpa-ratings-input-reaction-label-font-family);

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

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

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

.root {
  -st-states: layout(enum(labelTop, labelAside)), size(enum(small,large)), disabled, withError;
}
.root:withError {
  -st-mixin: ErrorMessageWrapper(ErrorColor value(mainErrorColor));
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none;
  padding: 0;
  margin: 0;
}

.label {
  display: flex;
  color: color(fallback(value(LabelColor), value(DefaultLabelColor)));
  font: fallback(font(value(LabelFont)), font(value(DefaultLabelFont)));
  padding-inline-start: 0;
}
.root:layout(labelAside) .label {
  float: left;
  padding-inline-end: 12px;
}
.root:layout(labelTop) .label {
  padding-bottom: 8px;
}

.ratingLabel {
  -st-states: srOnly, size(enum(small,large));
  color: color(fallback(value(ReactionLabelColor), value(DefaultReactionLabelColor)));
}
.ratingLabel:size(small) {
  font: fallback(font(value(ReactionLabelFontFamily)), value(DefaultReactionLabelFontFamilySmall));
}
.ratingLabel:size(large) {
  font: fallback(font(value(ReactionLabelFontFamily)), font(value(DefaultReactionLabelFontFamilyLarge)));
}
.ratingLabel:srOnly {
  -st-mixin: sr-only();
}
.root:size(small) .ratingLabel {
  font-size: 14px;
  margin-inline-start: 12px;
}
.root:size(large) .ratingLabel {
  font-size: 32px;
  margin-inline-start: 24px;
}

.ratingsWrapper {
  display: flex;
}
.root:size(large) .ratingsWrapper .ratingItem:not(:last-child) {
   padding-inline-end: 8px;
}

.ratingItem {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.root:size(small) .ratingItem {
  height: 24px;
}
.root:size(large) .ratingItem {
  height: 40px;
}
.root:disabled .ratingItem {
  cursor: default;
}
.ratingItem:focus-within {
  -st-mixin: focusRing();
}

.icon {
  color: value(mainIconColor);
}
.root:disabled .icon {
  color: color(color-3);
}
.root:withError .icon {
  color: value(mainErrorColor);
}
.root:withError .ratingsWrapper:hover .icon {
  color: value(mainIconColor);
}

.radio {
  position: absolute;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
}

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