:host,
.liquid-design-form.ldf-radio-button-group{
    /*label*/
    --font-weight-label: var(--telekom-typography-font-weight-medium);
    --font-size-label: var(--telekom-typography-font-size-body);

    /*helper-text*/
    --font-size-helper-text: var(--telekom-typography-font-size-small);
    --color-helper-text: var(
        --telekom-color-text-and-icon-functional-informational
    );
    --padding-bottom-helper-text: var(--telekom-spacing-unit-x2);
    --margin-top-helper-text: var(--telekom-spacing-unit-x1);
    --font-weight-helper-text: var(--telekom-typography-font-weight-medium);

    /*helper-text--status-error*/
    --font-size-error-helper-text: var(--telekom-typography-font-size-small);
    --color-error-helper-text: var(
        --telekom-color-text-and-icon-functional-danger
    );
    --padding-bottom-error-helper-text: var(--telekom-spacing-unit-x2);
    --margin-top-error-helper-text: var(--telekom-spacing-unit-x1);
    --font-weight-error-helper-text: var(--telekom-typography-font-weight-medium);
    --color-error-helper-text-hcm: var(
        --telekom-color-text-and-icon-white-standard
    );

    /*title*/
    --font-size-title: var(--telekom-typography-font-size-body);
    --font-weight-title: var(--telekom-typography-font-weight-medium);
    --padding-bottom-title: var(--telekom-spacing-unit-x1);
    --margin-left-title: var(--telekom-spacing-unit-x05);

    /*slotted items*/
    --margin-top-slotted-item: var(--telekom-spacing-unit-x1);
}

/* custom class for ul element */
.liquid-design-form.ldf-radio-button-group ul.inputs-list{
    position: relative;
    margin: 0;
    list-style: none;
    padding-left: 0;
}

.radio-button-group {
    display: inline-flex;
    flex-direction: column;
    border: 0;
}

.radio-button-group__container {
    display: flex;
    flex-direction: column;
}

.radio-button-group__helper-text {
    color: var(--color-helper-text);
    font-size: var(--font-size-helper-text);
    margin-top: calc(var(--margin-top-helper-text) * +1);
    padding-bottom: calc(var(--padding-bottom-helper-text) * -1);
    font-weight: var(--font-weight-helper-text);
}

.radio-button-group__helper-text--status-error {
    color: var(--color-error-helper-text);
    font-size: var(--font-size-error-helper-text);
    margin-top: calc(var(--margin-top-error-helper-text) * +1);
    padding-bottom: calc(var(--padding-bottom-error-helper-text) * -1);
    font-weight: var(--font-weight-error-helper-text);
}

.radio-button-group__title-label {
    font-size: var(--font-size-title);
    font-weight: var(--font-weight-title);
    padding-bottom: var(--padding-bottom-title);
    margin-left: calc(var(--margin-left-title) * -1.5);
}

::slotted(*) {
    margin-top: var(--margin-top-slotted-item);
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
    .radio-button-group__helper-text--status-error {
        color: var(--color-error-helper-text-hcm);
    }
}

/**
 * @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/.
 */

.liquid-design-form.ldf-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);
    --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: var(--telekom-spacing-unit-x6);
    --spacing-top-helper-text: var(--telekom-spacing-unit-x1);

    /*label*/
    --transition-label: var(--transition);
    --font-weight-label: var(--telekom-typography-font-weight-medium);
    --color-label: var(--color-text);

    /*control*/
    --width-control: var(--telekom-spacing-unit-x4);
    --height-control: var(--telekom-spacing-unit-x4);
    --transition-control: var(--transition);
    --spacing-control: 0 var(--telekom-spacing-unit-x2) 0 0;
    --background-color-control: var(--telekom-color-ui-additional-base);
    --border-control: var(--telekom-spacing-unit-x025) solid
    var(--telekom-color-ui-outlined-border-standard);
    --border-control-checked: calc(0.5 * var(--telekom-spacing-unit-x3)) solid
    var(--telekom-color-primary-standard);
    --border-control-checked-active: calc(0.5 * var(--telekom-spacing-unit-x3))
    solid var(--telekom-color-primary-pressed, #cb0068);
    --border-control-checked-disabled: calc(0.5 * var(--telekom-spacing-unit-x3))
    solid var(--telekom-color-ui-outlined-border-disabled);
    --background-control-checked-disabled: var(
        --telekom-color-ui-outlined-fill-disabled
    );
    --border-control-active: var(--telekom-spacing-unit-x2) solid
    var(--telekom-color-primary-pressed);
    --border-control-disabled: var(--telekom-spacing-unit-x025) solid
    var(--telekom-color-ui-outlined-border-disabled);
    --border-control-error: var(--telekom-spacing-unit-x05) solid
    var(--telekom-color-functional-danger-standard);
    --box-shadow-control-focus: 0 0 0 var(--telekom-spacing-unit-x05)
    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;
    justify-content: space-between;
}

.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);
    margin-top: var(--spacing-top-helper-text);
    padding-left: var(--spacing-left-helper-text);
}

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

.radio-button label {
    color: var(--color-label);
    transition: var(--transition-label);
    font-weight: var(--font-weight-label);
    cursor: pointer;
}
.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-outlined-fill-standard);
    border: var(--border-control);
    margin: var(--spacing-control);
    cursor: pointer;
}
.radio-button input:focus {
    outline: none;
    box-shadow: var(--box-shadow-control-focus);
}
.radio-button:hover input:not(:checked):not([disabled]) {
    box-shadow: none;
    border-color: var(--telekom-color-ui-outlined-border-hovered);
    background-color: var(--telekom-color-ui-outlined-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-outlined-border-pressed);
    background-color: var(--telekom-color-ui-outlined-fill-pressed);
}
.radio-button input:not(:checked):not([disabled]):active ~ label {
    color: var(--color-primary-active);
}
.radio-button input:disabled {
    border: 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);
}
.radio-button input:checked:active {
    border: var(--border-control-checked-active);
}
.radio-button input:checked:disabled {
    background: var(--background-control-checked-disabled);
    border: var(--border-control-checked-disabled);
}
.radio-button input:checked:disabled ~ label {
    color: var(--color-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-outlined-fill-standard);
}