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

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

:import {
  -st-from: "../internal/WixUiCoreComponents/components/CoreRadioButton/CoreRadioButton.st.css";
  -st-default: RadioButton;
}

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

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

/*Defaults*/
:vars {
  DefaultTextColor: color-5;
  DefaultBorderColor: color-5;
  DefaultIconColor: color-8;
  DefaultErrorColor: value(paletteErrorColor);
  DefaultBackgroundColor: color-1;
  DefaultLabelFont: font("{theme: 'Body-M', size: '16px', lineHeight: '1.5em'}");
  DisabledColor: color-3;
  DefaultMainBorderRadius: 0;
  DefaultMainBorderWidth: 1;
  DefaultSubtextFont: "{theme: 'Body-M', size:'14px', lineHeight: '1.4'}";
  DefaultSubtextColor: color-4;
  DefaultBorderOpacity: 0.6;
}

/*Overrides*/
:vars {
  /*
      The radio button text color
      @default color-5
  */
  TextColor: --overridable;
  /*
      The border color. FYI, An opacity from MainBorderOpacity will be added.
      @default color-5
  */
  BorderColor: --overridable;
  /*
      The color of the icon. This color would be used as the box's border color as well.
      @default color-8
  */
  IconColor:  --overridable;
  /*
      The box's background color. FYI, This value won't be affected on disabled mode.
      @default color-1
  */
  BackgroundColor:--overridable;
  /*
      The font of the radio button label
      @default {theme: 'Body-M', size: '16px', lineHeight: '1.5em'}
  */
  LabelFont: --overridable;
  /*
      The corner radius of the component
      @default Default size: 0px
  */
  MainBorderRadius: --overridable;
  /*
      The width of the component’s border
      @default Default size: 1px
  */
  MainBorderWidth: --overridable;
  /*
      The color representing an error
      @default #DF3131
  */
  ErrorColor: --overridable;
  /*
      A minimum height for the error message element
  */
  ErrorMessageMinHeight: --overridable;
  /*
      The font of the subtext text
      @default {theme: 'Body-M', size: '14px', lineHeight: '1.4'}
  */
  SubtextFont: --overridable;
  /*
      The color of the subtext text
      @default color-4
  */
  SubtextColor: --overridable;
  /*
      Border opacity
      @default 0.6
  */
  MainBorderOpacity: --overridable;
  /*
      The color of text, when hovered on the component
      @default TextColor
  */
  HoverTextColor: --overridable;
  /*
      The color of the subtext text, when hovered on the component
      @default SubtextColor
  */
  HoverSubtextColor: --overridable;
  /*
      The border width of the buttons input element (circle)
      @default 1px
  */
  InputBorderWidth: --overridable;
  /*
  The border width of the buttons input element (circle) on hover
  @default 1px
*/
  HoverInputBorderWidth: --overridable;
  /*
     The background color of the buttons input element (circle) on hover
     @default transparent
 */
  InputBackgroundColor: --overridable;
  /*
      The background color of the buttons input element (circle) on hover
      @default transparent
  */
  HoverInputBackgroundColor: --overridable;
  /*
      The inputs (circle) border color on hover
      @default BorderColor
  */
  HoverInputBorderColor: --overridable;
  /*
      The corner radius of the component
      @default Default size: 0px
  */
  HoverBorderRadius: --overridable;
}

/*
 * The radio button text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-radio-button-text-color);

/*
 * The border color. FYI, An opacity of --wix-ui-tpa-main-border-opacity will be added.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-radio-button-border-color);

/*
 * The color of the icon. This color would be used as the box's border color as well.
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-radio-button-icon-color);

/*
 * The box's background color. FYI, This value won't be affected on disabled mode.
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-radio-button-background-color);

/*
 * The font of the radio button label
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '16px', lineHeight: '1.5em'}
 */
@property st-global(--wix-ui-tpa-radio-button-label-font);

/*
 * The corner radius of the component
 * @type size
 * @default Default size: 0px
 */
@property st-global(--wix-ui-tpa-radio-button-main-border-radius);

/*
 * The width of the component’s border
 * @type size
 * @default Default size: 1px
 */
@property st-global(--wix-ui-tpa-radio-button-main-border-width);

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

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

/*
 * The font of the subtext text
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-radio-button-subtext-font);

/*
 * The color of the subtext text
 * @type color
 * @default --wix-color-4
 */
@property st-global(--wix-ui-tpa-radio-button-subtext-color);

/*
 * Border color opacity, when hovered on the component
 * @type size
 * @default Default size: 0.6
 */
@property st-global(--wix-ui-tpa-radio-main-border-opacity);

/*
 * The radio button text color, when hovered
 * @type color
 * @default --wix-ui-tpa-radio-button-text-color
 */
@property st-global(--wix-ui-tpa-radio-button-hover-text-color);

/*
 * The color of the subtext text, when hovered on the component
 * @type color
 * @default --wix-ui-tpa-radio-button-subtext-color
 */
@property st-global(--wix-ui-tpa-radio-button-hover-subtext-color);

/*
 * The border width of the buttons input element (circle)
 * @type size
 * @default 1px
 */
@property st-global(--wix-ui-tpa-radio-input-border-width);

/*
 * The border width of the buttons input element (circle) on hover
 * @type size
 * @default --wix-ui-tpa-radio-hover-border-width
 */
@property st-global(--wix-ui-tpa-radio-hover-input-border-width);

/*
 * The background color of the buttons input element (circle)
 * @type color
 * @default --wix-ui-tpa-radio-button-background-color
 */
@property st-global(--wix-ui-tpa-radio-input-background-color);

/*
 * The background color of the buttons input element (circle) on hover
 * @type color
 * @default --wix-ui-tpa-radio-hover-background-color
 */
@property st-global(--wix-ui-tpa-radio-hover-input-background-color);

/*
 * The border color of the buttons input element (circle) on hover
 * @type color
 * @default --wix-ui-tpa-radio-button-border-color
 */
@property st-global(--wix-ui-tpa-radio-hover-input-border-color);

/*
 * The border radius of the box element on hover
 * @type size
 * @default --wix-ui-tpa-radio-button-hover-border-radius
 */
@property st-global(--wix-ui-tpa-radio-button-hover-border-radius);

:vars {
  CurrentBorderColor: color(fallback(value(BorderColor), value(DefaultBorderColor)));
  CurrentIconColor: color(fallback(value(IconColor), value(DefaultIconColor)));
  CurrentTextColor: color(fallback(value(TextColor), value(DefaultTextColor)));
  CurrentSubtextColor: color(fallback(value(SubtextColor), value(DefaultSubtextColor)));
  CurrentBackgroundColor: color(fallback(value(BackgroundColor), value(DefaultBackgroundColor)));
  CurrentLabelFont: fallback(font(value(LabelFont)), value(DefaultLabelFont));
  mainBorderRadius: fallback(value(MainBorderRadius), value(DefaultMainBorderRadius));
  mainBorderWidth: fallback(value(MainBorderWidth), value(DefaultMainBorderWidth));
  errorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
  currentHoverBorderRadius: fallback(value(HoverBorderRadius), value(mainBorderRadius));
  currentSubtextFont: fallback(font(value(SubtextFont)), font(value(DefaultSubtextFont)));
  currentBorderOpacity: fallback(value(MainBorderOpacity), value(DefaultBorderOpacity));
  currentHoverTextColor: color(fallback(value(HoverTextColor), value(CurrentTextColor)));
  currentHoverSubtextColor: color(fallback(value(HoverSubtextColor), value(CurrentSubtextColor)));
  currentInputBorderWidth: fallback(value(InputBorderWidth), value(DefaultMainBorderWidth));
  currentHoverInputBorderWidth: fallback(value(HoverInputBorderWidth), value(DefaultMainBorderWidth));
  currentInputBackgroundColor: color(fallback(value(InputBackgroundColor), transparent));
  currentHoverInputBackgroundColor: color(fallback(value(HoverInputBackgroundColor), transparent));
  currentHoverInputBorderColor: color(fallback(value(HoverInputBorderColor), value(CurrentBorderColor)));
}

.labelWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wrapper {
  display: flex;
  align-items: start;
  -st-extends: RadioButton;
  cursor: pointer;
}

.root {
  -st-states: checked, disabled, box, error, newErrorMessage;
}

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

.radioIcon {
  background-color: value(currentInputBackgroundColor);
  height: 14px;
  border-radius: 50%;
  box-sizing: content-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  margin-top: 4px;
  border: unit(value(currentInputBorderWidth), px) solid applyOpacity(value(CurrentBorderColor), value(currentBorderOpacity));
  transition: background-color 0.2s linear, border-color 0.2s linear, border-width 0.2s linear, border-radius 0.2s linear;
}

.withChildren .radioIcon {
  top:calc(50% - 8px);
}

.innerCheck {
  margin: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: scale(0.5);
  opacity: 0;
  transition: background-color 0.2s linear, border-color 0.2s linear, border-width 0.2s linear, border-radius 0.2s linear;
}

.root:box {
  margin-top: -1px;
  margin-bottom: -1px;
}


.label.suffixed {
  flex: 1;
  display: flex;
}

.label.suffixed::after {
  content: '';
  width: 5px;
  flex: 1 0 5px;
}

.suffix {
  flex: 0;
}

.subtext {
  margin-top: 4px;
  font: value(currentSubtextFont);
  color: value(CurrentSubtextColor);
}

.subtext:hover {
  color: value(currentHoverSubtextColor);
}

.root:box:disabled {
  cursor: default;
}

.root:box:hover, .root:box:focus-within {
  border-color: value(CurrentBorderColor);
}

.root:box.disabled:hover:not(:checked), .root:box:disabled:focus-within:not(:checked) {
  border-color: applyOpacity(value(CurrentBorderColor), 0.6);
}

.root:box:checked {
  background-color: value(CurrentBackgroundColor);
  border-radius: unit(value(mainBorderRadius), px);
  z-index: 1;
}

.root:box:checked .wrapper {
  background-color: applyOpacity(value(CurrentIconColor), 0.1);
  border-color: value(CurrentIconColor);

}

.root:box:checked:not(:disabled):hover, .root:box:checked:not(:disabled):focus-within {
  border-color: applyOpacity(value(CurrentIconColor), value(currentBorderOpacity));
}

.root:box:not(:disabled):hover .icon {
  border-color: value(CurrentBorderColor);
}

.wrapper::label {
  width: 100%;
  font: value(CurrentLabelFont);
  color: value(CurrentTextColor);
}

.root:hover .label, .root:focus-within .label {
  color: value(currentHoverTextColor);
}

.root:hover .subtext, .root:focus-within .subtext {
  color: value(currentHoverSubtextColor);
}

.wrapper::icon {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wrapper::icon::after {
  content: '';
  width: 12px;
}

.root:box .wrapper{
  display: flex;
  padding: 15px 16px;
  background-color: applyOpacity(value(CurrentBackgroundColor),1);
  border: 1px solid applyOpacity(value(CurrentBorderColor), value(currentBorderOpacity));
  cursor: pointer;
  box-sizing: border-box;
  border-radius: unit(value(mainBorderRadius), px);
  border-width: unit(value(mainBorderWidth), px);
}

.root:box:disabled .wrapper {
  /* overriding the styling from wix-ui-core */
  filter: none;
  opacity: 1;
  /*******/
  border-color: color(value(DisabledColor));
  background-color: color(value(DefaultBackgroundColor));
}

.root:box:disabled:checked .wrapper {
  border-color: color(value(DisabledColor));
  background-color: applyOpacity(color(value(DisabledColor)), 0.1);
}

/* Create the indicator (the dot/circle - hidden when not checked) */


.root:box:hover:not(:checked):not(:error) .wrapper {
  border-color: value(CurrentBorderColor);
  border-radius: unit(value(currentHoverBorderRadius), px);
  transition: background-color 0.2s linear, border-color 0.2s linear, border-width 0.2s linear, border-radius 0.2s linear;
}

.root:hover .radioIcon, .root:focus-within .radioIcon {
  border-color: value(currentHoverInputBorderColor);
  transition: background-color 0.2s linear, border-color 0.2s linear, border-width 0.2s linear, border-radius 0.2s linear;
  background-color: value(currentHoverInputBackgroundColor);
  border-width: unit(value(currentHoverInputBorderWidth), px);
}

.root:checked .innerCheck {
  opacity: 1;
  background-color: value(CurrentIconColor);
  transform: scale(1);
}

/* Show the indicator (dot/circle) when checked */

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

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

.root:disabled .radioIcon {
  border-color: color(value(DisabledColor));
}
.root:disabled .innerCheck {
  background-color: color(value(DisabledColor));
}

.root:error .innerCheck {
  background-color: var(--wut-error-color, value(DefaultErrorColor)) !important;
}

.root:error .radioIcon {
  border-color: var(--wut-error-color, value(DefaultErrorColor)) !important;
}

.root:box:error .wrapper {
  border-color: var(--wut-error-color, value(DefaultErrorColor)) !important;
}

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

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