@enact/sandstone/RadioItem/RadioItem.module.css

Large-screen/TV support library for Enact, containing a variety of UI components.

.radioItem .icon {
  margin: 0;
}
.radioItem:global(.neutral) .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-text-color-rgb, 230, 230, 230));
  border-radius: 187.5rem;
}
.radioItem:global(.neutral).selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: var(--sand-toggle-on-bg-color, #30ad6b);
  box-shadow: 0 0 0 0.08333rem var(--sand-toggle-on-bg-color, #30ad6b);
}
.radioItem:global(.neutral)[disabled].selected .icon {
  color: var(--sand-disabled-selected-color, #4c5059);
  background-color: var(--sand-disabled-selected-bg-color, #e6e6e6);
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-bg-color, #e6e6e6);
}
:global(.spotlight-input-key) .radioItem:global(.neutral):global(.spottable):focus .icon,
:global(.spotlight-input-mouse) .radioItem:global(.neutral):global(.spottable):focus .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) .radioItem:global(.neutral):global(.spottable):focus.selected .icon,
:global(.spotlight-input-mouse) .radioItem:global(.neutral):global(.spottable):focus.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: var(--sand-toggle-on-bg-color, #30ad6b);
  box-shadow: 0 0 0 0.08333rem var(--sand-toggle-on-bg-color, #30ad6b);
}
:global(.spotlight-input-key) .radioItem:global(.neutral):global(.spottable):focus[disabled].selected .icon,
:global(.spotlight-input-mouse) .radioItem:global(.neutral):global(.spottable):focus[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, var(--sand-disabled-selected-bg-color, #e6e6e6));
  background-color: var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
}
:global(.spotlight-input-touch) .radioItem:global(.neutral):global(.spottable):active .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) .radioItem:global(.neutral):global(.spottable):active.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: var(--sand-toggle-on-bg-color, #30ad6b);
  box-shadow: 0 0 0 0.08333rem var(--sand-toggle-on-bg-color, #30ad6b);
}
:global(.spotlight-input-touch) .radioItem:global(.neutral):global(.spottable):active[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, var(--sand-disabled-selected-bg-color, #e6e6e6));
  background-color: var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
}
:global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast) .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-text-color-rgb, 230, 230, 230));
  border-radius: 187.5rem;
}
:global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast).selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: var(--sand-toggle-on-bg-color, #30ad6b);
  box-shadow: 0 0 0 0.08333rem var(--sand-toggle-on-bg-color, #30ad6b);
}
:global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast)[disabled].selected .icon {
  color: var(--sand-disabled-selected-color, #4c5059);
  background-color: var(--sand-disabled-selected-bg-color, #e6e6e6);
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-bg-color, #e6e6e6);
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus .icon,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus.selected .icon,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: var(--sand-toggle-on-bg-color, #30ad6b);
  box-shadow: 0 0 0 0.08333rem var(--sand-toggle-on-bg-color, #30ad6b);
}
:global(.spotlight-input-key) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus[disabled].selected .icon,
:global(.spotlight-input-mouse) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):focus[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, var(--sand-disabled-selected-bg-color, #e6e6e6));
  background-color: var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):active .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):active.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: var(--sand-toggle-on-bg-color, #30ad6b);
  box-shadow: 0 0 0 0.08333rem var(--sand-toggle-on-bg-color, #30ad6b);
}
:global(.spotlight-input-touch) :global(.enact-a11y-high-contrast) .radioItem:global(.neutral):global(.highContrast):global(.spottable):active[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, var(--sand-disabled-selected-bg-color, #e6e6e6));
  background-color: var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
}
.radioItem:global(.light) .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-text-color-rgb, 46, 50, 57));
  border-radius: 187.5rem;
}
.radioItem:global(.light).selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: var(--sand-toggle-on-bg-color, #30ad6b);
  box-shadow: 0 0 0 0.08333rem var(--sand-toggle-on-bg-color, #30ad6b);
}
.radioItem:global(.light)[disabled].selected .icon {
  color: var(--sand-disabled-selected-color, #ffffff);
  background-color: var(--sand-disabled-selected-bg-color, #788688);
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-bg-color, #788688);
}
:global(.spotlight-input-key) .radioItem:global(.light):global(.spottable):focus .icon,
:global(.spotlight-input-mouse) .radioItem:global(.light):global(.spottable):focus .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-key) .radioItem:global(.light):global(.spottable):focus.selected .icon,
:global(.spotlight-input-mouse) .radioItem:global(.light):global(.spottable):focus.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: var(--sand-toggle-on-bg-color, #30ad6b);
  box-shadow: 0 0 0 0.08333rem var(--sand-toggle-on-bg-color, #30ad6b);
}
:global(.spotlight-input-key) .radioItem:global(.light):global(.spottable):focus[disabled].selected .icon,
:global(.spotlight-input-mouse) .radioItem:global(.light):global(.spottable):focus[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, #e6e6e6);
  background-color: var(--sand-disabled-selected-focus-bg-color, #4c5059);
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, #4c5059);
}
:global(.spotlight-input-touch) .radioItem:global(.light):global(.spottable):active .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 76, 80, 89));
}
:global(.spotlight-input-touch) .radioItem:global(.light):global(.spottable):active.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: var(--sand-toggle-on-bg-color, #30ad6b);
  box-shadow: 0 0 0 0.08333rem var(--sand-toggle-on-bg-color, #30ad6b);
}
:global(.spotlight-input-touch) .radioItem:global(.light):global(.spottable):active[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, #e6e6e6);
  background-color: var(--sand-disabled-selected-focus-bg-color, #4c5059);
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, #4c5059);
}
.radioItem:global(.game) .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-text-color-rgb, 230, 230, 230));
  border-radius: 187.5rem;
}
.radioItem:global(.game).selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: #8b31d7;
  box-shadow: 0 0 0 0.08333rem #8b31d7;
}
.radioItem:global(.game)[disabled].selected .icon {
  color: var(--sand-disabled-selected-color, #4c5059);
  background-color: var(--sand-disabled-selected-bg-color, #e6e6e6);
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-bg-color, #e6e6e6);
}
:global(.spotlight-input-key) .radioItem:global(.game):global(.spottable):focus .icon,
:global(.spotlight-input-mouse) .radioItem:global(.game):global(.spottable):focus .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) .radioItem:global(.game):global(.spottable):focus.selected .icon,
:global(.spotlight-input-mouse) .radioItem:global(.game):global(.spottable):focus.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: #8b31d7;
  box-shadow: 0 0 0 0.08333rem #8b31d7;
}
:global(.spotlight-input-key) .radioItem:global(.game):global(.spottable):focus[disabled].selected .icon,
:global(.spotlight-input-mouse) .radioItem:global(.game):global(.spottable):focus[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, var(--sand-disabled-selected-bg-color, #e6e6e6));
  background-color: var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
}
:global(.spotlight-input-touch) .radioItem:global(.game):global(.spottable):active .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) .radioItem:global(.game):global(.spottable):active.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: #8b31d7;
  box-shadow: 0 0 0 0.08333rem #8b31d7;
}
:global(.spotlight-input-touch) .radioItem:global(.game):global(.spottable):active[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, var(--sand-disabled-selected-bg-color, #e6e6e6));
  background-color: var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
}
:global(.green) .radioItem:global(.game) .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-text-color-rgb, 230, 230, 230));
  border-radius: 187.5rem;
}
:global(.green) .radioItem:global(.game).selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: #45c194;
  box-shadow: 0 0 0 0.08333rem #45c194;
}
:global(.green) .radioItem:global(.game)[disabled].selected .icon {
  color: var(--sand-disabled-selected-color, #4c5059);
  background-color: var(--sand-disabled-selected-bg-color, #e6e6e6);
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-bg-color, #e6e6e6);
}
:global(.spotlight-input-key) :global(.green) .radioItem:global(.game):global(.spottable):focus .icon,
:global(.spotlight-input-mouse) :global(.green) .radioItem:global(.game):global(.spottable):focus .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.green) .radioItem:global(.game):global(.spottable):focus.selected .icon,
:global(.spotlight-input-mouse) :global(.green) .radioItem:global(.game):global(.spottable):focus.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: #45c194;
  box-shadow: 0 0 0 0.08333rem #45c194;
}
:global(.spotlight-input-key) :global(.green) .radioItem:global(.game):global(.spottable):focus[disabled].selected .icon,
:global(.spotlight-input-mouse) :global(.green) .radioItem:global(.game):global(.spottable):focus[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, var(--sand-disabled-selected-bg-color, #e6e6e6));
  background-color: var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
}
:global(.spotlight-input-touch) :global(.green) .radioItem:global(.game):global(.spottable):active .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.green) .radioItem:global(.game):global(.spottable):active.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: #45c194;
  box-shadow: 0 0 0 0.08333rem #45c194;
}
:global(.spotlight-input-touch) :global(.green) .radioItem:global(.game):global(.spottable):active[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, var(--sand-disabled-selected-bg-color, #e6e6e6));
  background-color: var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
}
:global(.orange) .radioItem:global(.game) .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-text-color-rgb, 230, 230, 230));
  border-radius: 187.5rem;
}
:global(.orange) .radioItem:global(.game).selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: #d75431;
  box-shadow: 0 0 0 0.08333rem #d75431;
}
:global(.orange) .radioItem:global(.game)[disabled].selected .icon {
  color: var(--sand-disabled-selected-color, #4c5059);
  background-color: var(--sand-disabled-selected-bg-color, #e6e6e6);
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-bg-color, #e6e6e6);
}
:global(.spotlight-input-key) :global(.orange) .radioItem:global(.game):global(.spottable):focus .icon,
:global(.spotlight-input-mouse) :global(.orange) .radioItem:global(.game):global(.spottable):focus .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-key) :global(.orange) .radioItem:global(.game):global(.spottable):focus.selected .icon,
:global(.spotlight-input-mouse) :global(.orange) .radioItem:global(.game):global(.spottable):focus.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: #d75431;
  box-shadow: 0 0 0 0.08333rem #d75431;
}
:global(.spotlight-input-key) :global(.orange) .radioItem:global(.game):global(.spottable):focus[disabled].selected .icon,
:global(.spotlight-input-mouse) :global(.orange) .radioItem:global(.game):global(.spottable):focus[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, var(--sand-disabled-selected-bg-color, #e6e6e6));
  background-color: var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
}
:global(.spotlight-input-touch) :global(.orange) .radioItem:global(.game):global(.spottable):active .icon {
  color: transparent;
  background-color: transparent;
  box-shadow: 0 0 0 0.08333rem rgb(var(--sand-component-focus-text-color-rgb, 230, 230, 230));
}
:global(.spotlight-input-touch) :global(.orange) .radioItem:global(.game):global(.spottable):active.selected .icon {
  color: rgb(var(--sand-selected-color-rgb, 230, 230, 230));
  background-color: #d75431;
  box-shadow: 0 0 0 0.08333rem #d75431;
}
:global(.spotlight-input-touch) :global(.orange) .radioItem:global(.game):global(.spottable):active[disabled].selected .icon {
  color: var(--sand-disabled-selected-focus-color, var(--sand-disabled-selected-bg-color, #e6e6e6));
  background-color: var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
  box-shadow: 0 0 0 0.08333rem var(--sand-disabled-selected-focus-bg-color, var(--sand-disabled-selected-color, #4c5059));
}