$radio-button-option-height: 16px;
$radio-button-size: 20px;
$radio-button-text-padding-top: 5px;
$labelIndent: $radio-button-size + $radio-button-option-height;

.radio-option {
    --circle-stroke-color: var(--digital-blue-60);
    --circle-fill-color: var(--white);

    position: relative;

    input[type='radio'] {
        // Hide the html radio under our custom one instead of using display:none to let the default keyboard navigation work.
        position: absolute;
        margin: 0;
        opacity: 0;

        & + label {
            @extend .body-l-book;

            position: relative;
            display: inline-flex;
            align-items: center;
            padding-left: $labelIndent;
            cursor: pointer;
            user-select: none;

            // color circle
            &::before {
                position: absolute;
                top: 2px;
                left: 0;
                z-index: 0;
                width: $radio-button-size;
                height: $radio-button-size;
                background-color: var(--circle-fill-color);
                border: 1px solid var(--circle-stroke-color);
                border-radius: 50%;
                content: '';
            }

            &:hover {
                --circle-stroke-color: var(--digital-blue-80);
            }

            & ~ .help-text,
            & ~ .description,
            & ~ .mod-align-with-radio-label {
                @extend .body-s-book-subdued;

                padding-left: $labelIndent;
            }
        }

        &:checked + label {
            @extend .h6;

            --circle-fill-color: var(--digital-blue-60);

            // checkmark
            &::after {
                position: absolute;
                top: 2px;
                left: 2px;
                z-index: 1;
                width: $radio-button-option-height;
                height: $radio-button-option-height;
                content: url('../resources/icons/svg/content/radiocheck.svg');
            }

            &:hover {
                --circle-fill-color: var(--digital-blue-80);
            }
        }

        &:disabled {
            & + label {
                --circle-stroke-color: var(--grey-50);
                --circle-fill-color: var(--grey-20);

                color: var(--grey-60);
                cursor: not-allowed;

                & ~ .help-text,
                & ~ .description,
                & ~ .mod-align-with-radio-label {
                    color: var(--grey-60);
                }
            }

            &:checked + label {
                // checkmark
                &::after {
                    position: absolute;
                    top: 2px;
                    left: 2px;
                    z-index: 1;
                    width: $radio-button-option-height;
                    height: $radio-button-option-height;
                    content: url('../resources/icons/svg/content/disabled-radiocheck.svg');
                }
            }
        }
    }
}

.radio-card-container {
    flex: 0;

    .radio-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 20px;
        transition: var(--default-transition);

        & > label {
            @extend .body-l-book;
        }

        &:hover {
            box-shadow: var(--medium-elevation-on-light);
            transform: translate3d(0, -4px, 0);
            cursor: pointer !important;
        }

        *:hover:not(a) {
            cursor: inherit;
        }
    }

    .card-input {
        display: none;
    }

    .card-input:checked + .radio-card {
        box-shadow:
            var(--low-elevation-on-light),
            inset 0 0 0 2px var(--digital-blue-60);
        transform: none;
    }

    .card-input:disabled + .radio-card {
        box-shadow: none;
        transform: none;
        cursor: not-allowed !important;

        *:not(a, .enabled *) {
            color: var(--grey-60);
        }
    }
}

.radio-select {
    .radio-option + .radio-option {
        margin-top: $checkbox-label-margin-top;
    }
}