@telekom/scale-components/dist/collection/components/radio-button/radio-button.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

scale-radio-button {
  --color-disabled: var(--telekom-color-text-and-icon-disabled);
  --background-disabled: var(--telekom-color-ui-disabled);
  --color-error: var(--telekom-color-text-and-icon-functional-danger);
  --transition: all var(--telekom-motion-duration-transition)
    var(--telekom-motion-easing-standard);
  --color-primary: var(--telekom-color-text-and-icon-primary-standard);
  --color-primary-hover: var(--telekom-color-text-and-icon-standard);
  --color-primary-active: var(--telekom-color-text-and-icon-standard);
  --color-focus: var(--telekom-color-functional-focus-standard);
  --color-text: var(--telekom-color-text-and-icon-standard);

  /*helper-text*/
  --transition-helper-text: var(--transition);
  --font-size-helper-text: var(--telekom-typography-font-size-small);
  --font-weight-helper-text: var(--telekom-typography-font-weight-bold);
  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);
  --color-helper-text: var(
    --telekom-color-text-and-icon-functional-informational
  );
  --spacing-left-helper-text: calc(
    var(--width-control) + var(--telekom-spacing-composition-space-04)
  );
  --spacing-top-helper-text: var(--telekom-spacing-composition-space-03);
  --color-helper-text-error: var(
    --telekom-color-text-and-icon-functional-danger
  );
  /*label*/
  --transition-label: var(--transition);
  --font-weight-label: var(--telekom-typography-font-weight-medium);
  --color-label: var(--color-text);
  --spacing-label: var(--telekom-spacing-composition-space-04);

  /*control*/
  --width-control: var(--telekom-spacing-composition-space-07);
  --height-control: var(--telekom-spacing-composition-space-07);
  --transition-control: var(--transition);
  --background-color-control: var(--telekom-color-ui-base);
  --border-control: var(--telekom-spacing-composition-space-01) solid
    var(--telekom-color-ui-border-standard);
  --line-height-helper-text: var(--telekom-typography-line-spacing-standard);
  --border-control-checked: calc(
      0.25 * var(--telekom-spacing-composition-space-05)
    )
    solid var(--telekom-color-background-canvas);
  --border-control-checked-disabled: calc(
      0.5 * var(--telekom-spacing-composition-space-05)
    )
    solid var(--telekom-color-ui-border-disabled);
  --background-control-checked-disabled: none;
  --border-control-active: var(--telekom-spacing-composition-space-04) solid
    var(--telekom-color-primary-pressed);
  --border-control-disabled: 0 0 0 var(--telekom-spacing-composition-space-01)
    var(--telekom-color-ui-border-disabled);
  --border-control-error: var(--telekom-spacing-composition-space-02) solid
    var(--telekom-color-functional-danger-standard);
  --box-shadow-control-focus: 0 0 0 var(--telekom-spacing-composition-space-03)
    var(--color-focus);
}

.radio-button {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  cursor: pointer;
  width: fit-content;
}

.radio-button .radio-button__meta {
  width: 100%;
  display: flex;
  padding-left: var(--spacing-left-helper-text);
}

.radio-button .radio-button__helper-text {
  transition: var(--transition-helper-text);
  font-size: var(--font-size-helper-text);
  font-weight: var(--font-weight-helper-text);
  line-height: var(--line-height-helper-text);
  color: var(--color-helper-text);
}

scale-icon-alert-information,
scale-icon-alert-error {
  color: var(--color-helper-text);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: var(--telekom-spacing-composition-space-03);
}

.radio-button--status-error .radio-button__helper-text {
  color: var(--color-helper-text-error);
}
.radio-button--status-error scale-icon-alert-error {
  color: var(--color-helper-text-error);
}

.radio-button label {
  color: var(--color-label);
  transition: var(--transition-label);
  font-weight: var(--font-weight-label);
  cursor: pointer;
  line-height: var(--telekom-typography-line-spacing-standard);
  padding-left: var(--spacing-label);
}
.radio-button input {
  width: var(--width-control);
  height: var(--height-control);
  transition: var(--transition-control);
  border-radius: 50%;
  -webkit-appearance: none;
  background-color: var(--telekom-color-ui-state-fill-standard);
  border: var(--border-control);
  margin: 0;
  cursor: pointer;
}

.radio-button:hover input:not(:checked):not([disabled]) {
  box-shadow: none;
  border-color: var(--telekom-color-ui-border-hovered);
  background-color: var(--telekom-color-ui-state-fill-hovered);
}
.radio-button:hover input:not(:checked):not([disabled]) ~ label {
  color: var(--color-primary-hover);
}
.radio-button:active input:not(:checked):not([disabled]) {
  border-color: var(--telekom-color-ui-border-pressed);
  background-color: var(--telekom-color-ui-state-fill-pressed);
}
.radio-button input:not(:checked):not([disabled]):active ~ label {
  color: var(--color-primary-active);
}
.radio-button input:disabled {
  box-shadow: var(--border-control-disabled);
}
.radio-button input:disabled ~ label {
  color: var(--color-disabled);
}
.radio-button.radio-button--status-error input {
  border: var(--border-control-error);
}
.radio-button.radio-button--status-error:hover
  input:not(:checked):not([disabled]) {
  border-color: var(--telekom-color-functional-danger-hovered);
}
.radio-button.radio-button--status-error:active
  input:not(:checked):not([disabled]) {
  border-color: var(--telekom-color-functional-danger-pressed);
}

.radio-button input:checked {
  border: var(--border-control-checked);
  background-color: var(--telekom-color-primary-standard);
  box-shadow: 0 0 0 var(--telekom-spacing-composition-space-01)
    var(--telekom-color-text-and-icon-primary-standard);
}
.radio-button input:checked:disabled {
  background-color: var(--background-disabled);
  border: var(--border-control-checked);
  box-shadow: var(--border-control-disabled);
}
.radio-button input:checked:disabled ~ label {
  color: var(--color-disabled);
  border: var(--border-control-disabled);
}

.radio-button--disabled,
.radio-button--disabled label,
.radio-button--disabled .radio-button__label,
.radio-button--disabled input,
.radio-button--disabled .radio-button__helper-text {
  cursor: not-allowed;
  border-color: var(--color-disabled);
  color: var(--color-disabled);
  background: var(--telekom-color-ui-state-fill-standard);
}

.radio-button--disabled scale-icon-alert-information,
.radio-button--disabled scale-icon-alert-error {
  color: var(--color-disabled);
}

.radio-button input:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}