NUXT_FRONTEND/assets/styles/blocks/poll.less

.poll {
    margin-bottom: 59px;
    &__wrapper {
        padding: 23px 31px 28px;
        background-color: @color-dark-blue;
    }
    &__topic {
        margin-bottom: 14px;
    }
    &__topic-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    &__topic-title {
        padding: 0 8px;
        letter-spacing: 0.08em;
        white-space: nowrap;
        text-transform: uppercase;
        color: rgba(@color-white, .5);
        font: 700 12px/17px @font-main;
    }
    &__topic-line {
        .size(100%, 1px);
        flex-grow: 1;
        background-color: rgba(@color-white, .5);
    }
    &__title {
        margin-bottom: 32px;
        font: 700 18px/26px @font-main;
        color: @color-white;
        text-align: center;
    }
}

@media @media-sm {
    .poll {
        margin-bottom: 24px;
        &__wrapper {
            padding: 20px 16px;
        }
    }
}

.poll_small {
    position: relative;
    margin-bottom: 0;
    height: 402px;
    .poll {
        &__wrapper {
            padding: 23px 28px 22px 21px;
            height: 100%;
        }
        &__first {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 46px;
            background-color: @color-dark-blue;
            z-index: 10;
        }
        &__topic {
            margin-bottom: 6px;
        }
    }
}

.poll-first {
    height: 100%;
    padding: 0 28px 30px;
    &__title {
        margin-top: 96px;
        margin-bottom: 39px;
        min-height: 105px;
        text-align: center;
        font: 24px/34px @font-main;
        color: @color-white;
    }
    &__actions {
        display: flex;
        justify-content: center;
        margin-bottom: 21px;
    }
    &__result {
        text-align: center;
        font: 14px/20px @font-main;
        color: @color-white;
    }
}

.poll-second {
    &__title {
        display: flex;
        align-items: flex-end;
        text-align: center;
        margin-bottom: 44px;
        min-height: 107px;
        font: 24px/34px @font-main;
        color: @color-white;
    }
}

.poll-form {
    &__list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -26.5px;
    }
    &__item {
        flex: 0 1 33.33333333%;
        max-width: 33.33333333%;
        padding: 0 26.5px;
        margin-bottom: 18px;
    }
    &__actions {
        display: flex;
        justify-content: center;
    }
}

@media @media-sm {
    .poll-form {
        &__list {
            margin: 0 -10px;
        }
        &__item {
            flex: 0 1 50%;
            max-width: 50%;
            padding: 0 10px;
            margin-bottom: 20px;
        }
    }
}

@media @media-xs {
    .poll-form {
        &__list {
            margin: 0 0 24px 0;
        }
        &__item {
            flex: 0 1 100%;
            max-width: 100%;
            padding: 0;
            margin-bottom: 20px;
        }
    }
}

.poll-form_columns {
    .poll-form {
        &__list {
            display: block;
            margin-bottom: 17px;
        }
        &__item {
            margin-bottom: 0;
            max-width: none;
            &:not(:last-child) {
                margin-bottom: 22px;
            }
        }
        &__votes {
            display: none;
            padding-left: 40px;
            font: 14px/18px @font-main;
            color: @color-white;
        }
        &__radio {
            &.disabled {
                .radio {
                    pointer-events: none;
                }
            }
        }
    }
    .radio__text {
        font: 700 18px/23px @font-main;
    }
}

@media @media-xs {
    .poll-form_columns {
        .radio__text {
            font: 700 15px/20px @font-main;
        }
        .poll-form {
            &__votes {
                padding-left: 0;
            }
        }    
    }
}