element-web/res/css/views/elements/_StyledRadioButton.pcss

/*
Copyright 2024 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/

/**
* This component expects the parent to specify a positive padding and
* width
*/

.mx_StyledRadioButton {
    $radio-circle-color: var(--cpd-color-border-interactive-primary);
    $active-radio-circle-color: var(--cpd-color-bg-accent-rest);
    position: relative;

    display: flex;
    align-items: baseline;
    flex-grow: 1;

    > .mx_StyledRadioButton_content {
        flex-grow: 1;

        display: flex;
        flex-direction: column;

        margin-left: 8px;
        margin-right: 8px;
    }

    .mx_StyledRadioButton_spacer {
        flex-shrink: 0;
        flex-grow: 0;

        height: $font-16px;
        width: $font-16px;
    }

    input[type="radio"] {
        /* Remove the OS's representation */
        margin: 0;
        padding: 0;
        appearance: none;

        + div {
            flex-shrink: 0;
            flex-grow: 0;

            display: flex;
            align-items: center;
            justify-content: center;

            box-sizing: border-box;
            height: $font-16px;
            width: $font-16px;
            margin-left: 2px; /* For the highlight on focus */

            border: 1px solid $radio-circle-color;
            border-radius: $font-16px;

            > div {
                box-sizing: border-box;

                height: $font-8px;
                width: $font-8px;

                border-radius: $font-8px;
            }
        }

        &:focus-visible {
            & + div {
                @mixin unreal-focus;
            }
        }

        &:checked {
            & + div {
                border-color: $active-radio-circle-color;

                & > div {
                    background: $active-radio-circle-color;
                }
            }
        }

        &:disabled {
            & + div,
            & + div + span {
                opacity: 0.5;
                cursor: not-allowed;
            }

            & + div {
                border-color: $radio-circle-color;
            }
        }

        &:checked:disabled {
            & + div > div {
                background-color: $radio-circle-color;
            }
        }
    }

    .mx_StyledRadioButton_innerLabel {
        display: flex;
        position: relative;
        top: 4px;
    }
}

.mx_StyledRadioButton_outlined {
    border: 1px solid $input-darker-bg-color;
    border-radius: 8px;
}

.mx_StyledRadioButton_checked {
    border-color: var(--cpd-color-bg-accent-rest);
}