@st-namespace 'RadioButton-st-css';
@st-import [ --wix-color-5, --wix-color-4, --wix-color-1,--wix-color-8, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont, setColor, setVar, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ errorColor, errorColor-rgb, focusRing ] from '../../common/palette.st.css';
@st-import RadioButton, [innerWrapper] from '../internal/WixUiCoreComponents/components/CoreRadioButton/CoreRadioButton.st.css';
@st-import [ --wst-system-error-color-rgb, --wst-links-and-actions-color-rgb, --wst-primary-background-color-rgb, --wst-paragraph-2-color-rgb, --wst-system-disabled-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

@property st-global(--wut-error-color);

/*
 * 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-radio-main-border-opacity will be added.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-radio-button-border-color);

/*
 * The border color, when disabled on the component. FYI, An opacity of --wix-ui-tpa-radio-main-border-opacity will be added.
 * @type color
 * @default --wix-color-3
 */
 @property st-global(--wix-ui-tpa-radio-button-disabled-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 font of the subtext text, when checked on the component
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-radio-button-checked-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 color of the subtext text, when checked on the component
 * @type color
 * @default --wix-ui-tpa-radio-button-subtext-color
 */
 @property st-global(--wix-ui-tpa-radio-button-checked-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 1px
 */
@property st-global(--wix-ui-tpa-radio-hover-input-border-width);

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

/*
 * The background color of the buttons input element (circle) on hover
 * @type color
 * @default transparent
 */
@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 corner radius of the component on hover
 * @type size
 * @default --wix-ui-tpa-radio-button-main-border-radius
 */
@property st-global(--wix-ui-tpa-radio-button-hover-border-radius);

/*
 * The space between the radio button and the label
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-radio-button-column-gap);

.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:box {
  margin-top: -1px;
}

.root:box:not(:newErrorMessage) {
  margin-bottom: -1px;
}

.root:error:newErrorMessage {
  -st-mixin:
    setColor(--wix-ui-tpa-error-message-wrapper-error-color, --wix-ui-tpa-radio-button-error-color, value(errorColor-rgb)),
    setVar(--wix-ui-tpa-error-message-wrapper-min-message-height, --wix-ui-tpa-radio-button-error-message-min-height);
}

.radioIcon {
  background-color: createColor(--wix-ui-tpa-radio-input-background-color, var(--wst-primary-background-color-rgb, rgb(0, 0, 0, 0)));
  height: 14px;
  border-radius: 50%;
  box-sizing: content-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  margin-top: 4px;
  border: var(--wix-ui-tpa-radio-input-border-width, 1px) solid createColor(--wix-ui-tpa-radio-button-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-radio-main-border-opacity, 0.6));
  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;
}

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

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

.suffix {
  flex: 0;
}

.subtext {
  margin-top: 4px;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.4", "size": "14px" }'),
  createFont((--wix-ui-tpa-radio-button-subtext-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-radio-button-subtext-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-4)));
}

.subtext:hover {
  color: createColor(--wix-ui-tpa-radio-button-hover-subtext-color, --wix-ui-tpa-radio-button-subtext-color);
}

.root:disabled .subtext {
  color: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.root:checked:not(:disabled):not(:hover):not(:focus-within) .subtext {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.4", "size": "14px" }'),
  createFont((--wix-ui-tpa-radio-button-checked-subtext-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-radio-button-checked-subtext-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-4)));
}

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

.root:box:hover,
.root:box:focus-within {
  border-color: createColor(--wix-ui-tpa-radio-button-border-color, var(--wix-color-5));
}

.root:box.disabled:hover:not(:checked),
.root:box:disabled:focus-within:not(:checked) {
  border-color: createColor(--wix-ui-tpa-radio-button-border-color, var(--wix-color-29), 0.6);
}

.root:box:checked {
  background-color: createColor(--wix-ui-tpa-radio-button-background-color, var(--wix-color-1));
  border-radius: var(--wix-ui-tpa-radio-button-main-border-radius, 0px);
  z-index: 1;
}

.root:box:checked .wrapper {
  background-color: createColor(--wix-ui-tpa-radio-button-icon-color, var(--wix-color-8), 0.1);
  border-color: createColor(--wix-ui-tpa-radio-button-icon-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-8)));
}

.root:box:checked:not(:disabled):hover,
.root:box:checked:not(:disabled):focus-within {
  border-color: createColor(--wix-ui-tpa-radio-button-icon-color, var(--wix-color-29), var(--wix-ui-tpa-radio-main-border-opacity, 0.6));
  border-radius: var(--wix-ui-tpa-radio-button-hover-border-radius, var(--wix-ui-tpa-radio-button-main-border-radius));
}

.root:box:not(:disabled):hover .icon {
  border-color: createColor(--wix-ui-tpa-radio-button-border-color, var(--wix-color-29));
}

.wrapper::label {
  width: 100%;
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.5em", "size": "16px" }'),
  createFont((--wix-ui-tpa-radio-button-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
  color: createColor(--wix-ui-tpa-radio-button-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.wrapper::label:hover {
  color: createColor(--wix-ui-tpa-radio-button-hover-text-color, --wix-ui-tpa-radio-button-text-color);
}

.root:hover .label,
.root:focus-within .label {
  color: createColor(--wix-ui-tpa-radio-button-hover-text-color, --wix-ui-tpa-radio-button-text-color);
}

.root:hover .subtext,
.root:focus-within .subtext {
  color: createColor(--wix-ui-tpa-radio-button-hover-subtext-color, --wix-ui-tpa-radio-button-subtext-color);
}

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

.wrapper::icon {
  margin-inline-end: var(--wix-ui-tpa-radio-button-column-gap, 12px);
}

.root:box .wrapper {
  display: flex;
  padding: 15px 16px;
  background-color: createColor(--wix-ui-tpa-radio-button-background-color, var(--wix-color-1));
  border: 1px solid createColor(--wix-ui-tpa-radio-button-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-radio-main-border-opacity, 0.6));
  cursor: pointer;
  box-sizing: border-box;
  border-radius: var(--wix-ui-tpa-radio-button-main-border-radius, 0px);
  border-width: var(--wix-ui-tpa-radio-button-main-border-width, 1px);
}

.root:box .wrapper:hover {
  border-radius: var(--wix-ui-tpa-radio-button-hover-border-radius, var(--wix-ui-tpa-radio-button-main-border-radius));
  background-color: createColor(--wix-ui-tpa-radio-hover-background-color, var(--wix-ui-tpa-radio-button-background-color));
}

.root:box:disabled .wrapper {
  /* overriding the styling from wix-ui-core */
  filter: none;
  opacity: 1;
  /*******/
  border-color: createColor(--wix-ui-tpa-radio-button-disabled-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
  background-color: rgb(var(--wix-color-1));
}

.root:box:disabled:checked .wrapper {
  border-color: createColor(--wix-ui-tpa-radio-button-disabled-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
  background-color: rgb(var(--wix-color-29), 0.1);
}

.root:box:not(:checked):not(:disabled):not(:error) .wrapper {
  background-color: createColor(--wix-ui-tpa-radio-button-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

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

.root:box:hover:not(:checked):not(:error) .wrapper {
  border-color: createColor(--wix-ui-tpa-radio-button-border-color, var(--wix-color-5));
  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: createColor(--wix-ui-tpa-radio-hover-input-border-color, var(--wix-ui-tpa-radio-button-border-color, var(--wix-color-5)));
  transition: background-color 0.2s linear, border-color 0.2s linear, border-width 0.2s linear, border-radius 0.2s linear;
  background-color: createColor(--wix-ui-tpa-radio-hover-input-background-color, var(--wst-primary-background-color-rgb, rgb(0, 0, 0, 0)));
  border-width: var(--wix-ui-tpa-radio-hover-input-border-width, 1px);
}

.root:checked .innerCheck {
  opacity: 1;
  background-color: createColor(--wix-ui-tpa-radio-button-icon-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
  transform: scale(1);
}

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

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

.root:disabled .label {
  color: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.root:disabled .radioIcon {
  border-color: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.root:disabled .innerCheck {
  background-color: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.root:error .innerCheck {
  background-color: var(--wut-error-color, rgb(var(--wst-system-error-color-rgb, value(errorColor-rgb)))) !important;
}

.root:error .radioIcon {
  border-color: var(--wut-error-color, rgb(var(--wst-system-error-color-rgb, value(errorColor-rgb)))) !important;
}

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

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

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