@layer components {
    .poll {
        display: grid;
        gap: var(--space-20);
    }

    .poll--content {
        padding: var(--space-20);
        border-radius: var(--radius-corner);
        background-color: var(--color-bg-surface-alt);
    }

    .poll__vote--hidden,
    .poll__results {
        display: none;
    }

    .poll__form,
    .poll__results--visible,
    .poll__list {
        display: grid;
        gap: var(--space-8);
    }

    .poll__form button {
        margin-top: var(--space-8);
    }

    .poll__question,
    .poll__label,
    .poll__message,
    .poll__total,
    .poll__actions {
        display: block;
    }

    .poll__question {
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--space-8);
    }

    .poll__item {
        list-style: none;
    }

    .poll__vote .poll__item {
        display: grid;
        grid-template-areas: "option label";
        grid-template-columns: var(--space-24) minmax(0, 1fr);
        align-items: center;
        gap: var(--space-8);
        margin-block: var(--space-8);
    }

    .poll__vote .poll__label {
        grid-area: label;
    }

    .poll__results .poll__item {
        display: flex;
        flex-flow: column;
        gap: var(--space-8);
    }

    .poll__option {
        grid-area: option;
        margin: 0;
        flex-shrink: 0;
    }

    .poll__option:checked::before {
        content: none;
    }

    .poll__option-mark {
        grid-area: option;
        pointer-events: none;
        display: grid;
        place-items: center;
        width: var(--space-24);
        height: var(--space-24);
        color: var(--color-text-inverse);
        opacity: 0;
        transform: scale(0.82);
        transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .poll__option:checked + .poll__option-mark {
        opacity: 1;
        transform: scale(1);
    }

    .poll__option-icon {
        display: block;
        width: var(--space-12);
        height: var(--space-12);
        fill: currentColor;
    }

    .poll__result {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 4ch;
        align-items: center;
        width: 100%;
        gap: var(--space-8);
    }

    .poll__bar {
        overflow: hidden;
        border-radius: var(--radius-corner);
    }

    .poll__bar-fill {
        height: var(--space-12);
        border-radius: var(--radius-corner);
    }

    .poll--content .poll__bar {
        background-color: var(--color-bg-surface);
    }

    .poll--content .poll__bar-fill {
        background-color: var(--color-brand-primary);
    }

    .poll--sidebar .poll__bar {
        background-color: var(--color-disabled-fg);
    }

    .poll--sidebar .poll__bar-fill {
        background-color: var(--color-brand-primary);
    }

    .poll__result--selected .poll__bar-fill,
    .poll__result--pending .poll__bar-fill {
        background-color: var(--color-ui-contrast);
    }

    .poll__percentage {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        white-space: nowrap;
    }

    .poll__result--empty .poll__bar {
        opacity: 0.42;
    }

    .poll__result--empty .poll__percentage {
        color: var(--color-text-subtle);
        opacity: 0.72;
    }
}