@geoffcox/sterling-svelte-themes/css/sterling/Radio.base.css

A modern theme for the sterling-svelte component library.

.sterling-radio {
  align-content: center;
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  font: inherit;
  margin: 0;
  outline: none;
  padding: 0;
}
/* 
		The container 
		- allows the input to be hidden
		- avoids input participating in layout
		- prevents collisions with surrounding slots
	 */
.sterling-radio .container {
  box-sizing: border-box;
  position: relative;
  font: inherit;
  display: flex;
  align-items: center;
  margin-right: 0.25em;
}

/*
		The input is hidden since the built-in browser radio cannot be customized
	*/
.sterling-radio input {
  appearance: none;
  font: inherit;
  margin: 0;
  padding: 0;
  position: absolute;
  opacity: 0;
  height: 21px;
  width: 21px;
}

/*
	 	The indicator handles both the radio box and circle mark.
	 	The box cannot be on the container since the adjacent sibling selector is needed
		and there is not a parent CSS selector.
	*/
.sterling-radio .indicator {
  background-color: var(--stsv-input__background-color);
  border-color: var(--stsv-input__border-color);
  border-style: solid;
  border-width: var(--stsv-input__border-width);
  border-radius: 10000px;
  box-sizing: border-box;
  display: inline-block;
  height: 21px;
  position: relative;
  pointer-events: none;
  transition:
    background-color 250ms,
    color 250ms,
    border-color 250ms;
  width: 21px;
}

.sterling-radio input:checked + .indicator {
  background-color: var(--stsv-input__background-color);
  border-color: var(--stsv-input__border-color);
}

.sterling-radio:not(.disabled):hover .indicator {
  background-color: var(--stsv-input__background-color--hover);
  border-color: var(--stsv-input__border-color--hover);
}

.sterling-radio input:focus-visible + .indicator {
  outline-color: var(--stsv-common__outline-color);
  outline-offset: 0;
  outline-style: solid;
  outline-width: var(--stsv-common__outline-width);
}

.sterling-radio .indicator::after {
  background-color: transparent;
  border-radius: 10000px;
  content: '';
  height: 9px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 250ms;
  width: 9px;
}

.sterling-radio input:checked + .indicator::after {
  background-color: var(--stsv-input__color);
}

.sterling-radio label {
  color: var(--stsv-common__color);
  transition: color 250ms;
  font: inherit;
}

.sterling-radio.disabled,
.sterling-radio.disabled input,
.sterling-radio.disabled label {
  cursor: not-allowed;
}

.sterling-radio.disabled .indicator {
  background-color: var(--stsv-input__background-color--disabled);
  border-color: var(--stsv-input__border-color--disabled);
}

.sterling-radio.disabled .indicator::after {
  border-color: var(--stsv-input__color--disabled);
}

.sterling-radio.disabled label {
  color: var(--stsv-common__color--disabled);
}

@media (prefers-reduced-motion) {
  .sterling-radio .indicator,
  .sterling-radio .indicator::after,
  .sterling-radio .container::after,
  .sterling-radio label {
    transition: none;
  }
}