/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
/* Do not use this */
/* Use this */
go-radio {
  /**
    @prop --radio-border-color:
      Default border color
      - default: var(--input-border-color)
  */
  --radio-border-color: var(--input-border-color);
  /**
    @prop --radio-border-width:
      Default border width
      - default: 2px
  */
  --radio-border-width: 0.125rem;
  /**
    @prop --radio-border:
      radio default border
      - default: var(--radio-border-width) solid var(--radio-border-color)
  */
  --radio-border: var(--radio-border-width) solid var(--radio-border-color);
  /**
    @prop --radio-border-color-hover:
      radio hover state color
      - default: var(--go-color-neutral-700)
  */
  --radio-border-color-hover: var(--go-color-neutral-700);
  /**
    @prop --radio-size:
      Size of radio
      - default: 1.5em
  */
  --radio-size: 1.5em;
  /**
    @prop --radio-dot-size:
      inside circle size
      - default: 0.7em
  */
  --radio-dot-size: 0.7em;
  /**
    @prop --radio-checked-bg:
      radio button background color when checked
      - default: var(--control-selected-bg-color)
  */
  --radio-checked-bg: var(--control-selected-bg-color);
  /**
    @prop --radio-checked-fg:
      radio button foreground color when checked
      - default: var(--control-selected-fg-color)
  */
  --radio-checked-fg: var(--control-selected-fg-color);
  /**
    @prop --radio-mark-shadow-inner:
      drop shadow for selected mark
      - default: var(--shadow-2)
  */
  --radio-mark-shadow-inner: var(--shadow-2);
}
go-radio .control-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--input-gap-inner);
}
go-radio input,
go-radio label {
  cursor: pointer;
}
go-radio[error] {
  color: var(--input-error-color);
  --input-hint-color: var(--input-error-color);
  --radio-border-color: var(--input-error-color);
}
go-radio[error] .control {
  --input-border-color: var(--input-error-color);
  border-color: var(--input-error-color);
}
go-radio[error] input:checked ~ .mark {
  --radio-checked-bg: var(--input-error-color);
}
go-radio[error] .error-msg {
  margin: var(--input-gap-inner) 0;
}
go-radio[disabled] input,
go-radio[disabled] label {
  cursor: not-allowed;
}
go-radio[disabled] .box .mark {
  background: var(--input-bg-disabled-color);
  border-color: var(--input-text-disabled-color);
}
go-radio[disabled] .box input:checked ~ .mark .dot {
  background: var(--input-text-disabled-color);
}
go-radio label {
  margin: 0;
  font-size: var(--go-size-0);
  font-weight: 400;
  line-height: 1.5;
  line-height: var(--radio-size);
}
go-radio label ~ .hint {
  margin-top: 0.25rem;
}
go-radio .box {
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
}
go-radio .mark {
  display: block;
  width: var(--radio-size);
  height: var(--radio-size);
  border: var(--radio-border);
  border-radius: 50%;
  transition: background-color var(--go-duration-normal) var(--go-timing-function);
}
@media (prefers-reduced-motion: reduce) {
  go-radio .mark {
    transition-duration: 0s;
  }
}
go-radio .mark .dot {
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--radio-dot-size);
  height: var(--radio-dot-size);
  transition: background-color var(--go-duration-normal) var(--go-timing-function);
}
@media (prefers-reduced-motion: reduce) {
  go-radio .mark .dot {
    transition-duration: 0s;
  }
}
go-radio input:checked ~ .mark {
  background: var(--radio-checked-bg);
  border-color: var(--radio-checked-bg);
}
go-radio input:checked ~ .mark .dot {
  background: var(--radio-checked-fg);
  box-shadow: var(--radio-mark-shadow-inner);
}
go-radio input:not(:disabled):hover ~ .mark {
  border-color: var(--radio-border-color-hover);
}
go-radio input:not(:disabled):focus-visible ~ .mark {
  outline: var(--go-focus-outline-width, 2px) solid var(--go-focus-outline-color, #000);
  outline-offset: var(--go-focus-outline-offset);
}
go-radio input:not(:disabled):active ~ .mark {
  box-shadow: var(--input-focus-shadow);
  outline-offset: 0;
}
go-radio .hint {
  color: var(--input-hint-color);
  line-height: 1;
  font-size: var(--input-hint-font-size);
}
go-radio .hint:last-child {
  margin-bottom: 0;
}