/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
.grid-radio {
  --wcs-grid-radio-outline-color: var(--wcs-semantic-color-border-focus-base);
  --wcs-grid-radio-padding: calc(var(--wcs-semantic-size-base) / 4);
  --wcs-grid-radio-transition: var(--wcs-semantic-motion-duration-feedback-base);
  --wcs-grid-radio-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);
  --wcs-grid-radio-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);
  --wcs-grid-radio-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);
  --wcs-grid-radio-border-color-disabled: var(--wcs-semantic-color-border-control-indicator-disabled);
  --wcs-grid-radio-background-color-default: transparent;
  --wcs-grid-radio-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);
  --wcs-grid-radio-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);
  --wcs-grid-radio-inner-border-color: white;
  width: fit-content;
  cursor: pointer;
  padding: var(--wcs-grid-radio-padding, 0.125rem);
  /*
  * DO NOT REMOVE:
  * The native radio input is absolutely positioned.
  * This `position: relative` makes `.grid-radio` its containing block.
  * Without it, the input can be laid out relative to another ancestor higher in the DOM,
  * so when the browser focuses the native control it may scroll the window unexpectedly.
  */
  position: relative;
  /* If the selector focus-visible is not supported by the browser, use focus-within instead */
}
.grid-radio:has(input:focus-visible) {
  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);
  outline-offset: var(--wcs-semantic-spacing-small);
  border-radius: 0.1rem;
}
@supports not selector(:has(input:focus-visible)) {
  .grid-radio:focus-within {
    outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);
    outline-offset: var(--wcs-semantic-spacing-small);
    border-radius: 0.1rem;
  }
}
.grid-radio input {
  position: absolute;
  opacity: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.grid-radio::before {
  content: "";
  display: flex;
  border-radius: 50%;
  border: 2px solid var(--wcs-grid-radio-border-color-default);
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  box-sizing: border-box;
  background-color: var(--wcs-grid-radio-background-color-default);
  transition: var(--wcs-grid-radio-transition, 0.175s) ease-in-out;
}
.grid-radio:hover::before {
  border-color: var(--wcs-grid-radio-border-color-hover);
}
.grid-radio.checked::before {
  border-color: var(--wcs-grid-radio-border-color-selected);
  background-color: var(--wcs-grid-radio-background-color-selected);
  outline: solid 2px var(--wcs-grid-radio-inner-border-color);
  outline-offset: -4px;
}