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

A modern theme for the sterling-svelte component library.

.sterling-radio.button {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-content: center;
  justify-items: center;
  border: 1px solid transparent;
}

.sterling-radio.button:not(.disabled):hover {
  background-color: var(--stsv-button__background-color--hover);
}

.sterling-radio.button:not(.disabled):not(.checked):active {
		background-color: var(--stsv-button__background-color--active);
	}

	.sterling-radio.button:not(.disabled).checked {
		background-color: var(--stsv-input__background-color--selected);
	}

	.sterling-radio.button.using-keyboard:focus-within {
		outline-color: var(--stsv-common__outline-color);
		outline-offset: 0;
		outline-style: solid;
		outline-width: 2px;
	}

.sterling-radio.button .container,
.sterling-radio.button label {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
}

.sterling-radio.button .container {
  display: block;
  justify-self: stretch;
  align-self: stretch;
  margin-right: unset;
}

.sterling-radio.button label {
  display: block;
}

.sterling-radio.button input {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: unset;
  height: unset;
}

.sterling-radio.button .indicator {
  display: none;
}


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

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