element-web/res/css/components/views/polls/_PollOption.pcss

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

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

.mx_PollOption {
    border: 1px solid $quinary-content;
    border-radius: 8px;
    padding: 6px 12px;
    background-color: $background;

    .mx_StyledRadioButton_content,
    .mx_PollOption_endedOption {
        padding-top: 2px;
        margin-right: 0px;
    }

    .mx_StyledRadioButton_spacer {
        display: none;
    }
}

.mx_PollOption,
/* label has cursor: default in user-agent stylesheet */
/* override */
.mx_PollOption_live-option {
    cursor: pointer;
}

.mx_PollOption_content {
    display: flex;
    justify-content: space-between;
}

.mx_PollOption_optionVoteCount {
    color: $secondary-content;
    font-size: $font-12px;
    white-space: nowrap;
}

.mx_PollOption_winnerIcon {
    height: 12px;
    width: 12px;
    color: var(--cpd-color-icon-accent-tertiary);
    margin-right: $spacing-4;
    vertical-align: middle;
}

.mx_PollOption_checked {
    .mx_PollOption_popularityBackground {
        .mx_PollOption_popularityAmount {
            background-color: var(--cpd-color-icon-primary);
        }
    }

    /* override checked radio button styling to show checkmark instead */
    .mx_StyledRadioButton_checked {
        input[type="radio"]:checked + div {
            border-color: var(--cpd-color-icon-primary);
            background-color: var(--cpd-color-icon-primary);

            div {
                background: none;

                svg {
                    color: var(--cpd-color-icon-on-solid-primary);
                    width: 12px;
                    height: 12px;
                    margin: -2px;
                    display: block;
                }
            }
        }
    }
}

.mx_PollOption_ended.mx_PollOption_checked {
    .mx_PollOption_popularityBackground {
        .mx_PollOption_popularityAmount {
            background-color: var(--cpd-color-icon-accent-tertiary);
        }
    }

    /* override checked radio button styling to show checkmark instead */
    .mx_StyledRadioButton_checked {
        input[type="radio"]:checked + div {
            border-color: var(--cpd-color-icon-accent-tertiary);
            background-color: var(--cpd-color-icon-accent-tertiary);
        }
    }
}

/* options not actionable in these states */
.mx_PollOption_checked,
.mx_PollOption_ended {
    pointer-events: none;
}

.mx_PollOption_popularityBackground {
    width: 100%;
    height: 8px;
    margin-right: 12px;
    border-radius: 8px;
    background-color: $system;
    margin-top: $spacing-8;

    .mx_PollOption_popularityAmount {
        width: 0%;
        height: 8px;
        border-radius: 8px;
        background-color: var(--cpd-color-icon-primary);
    }
}