@use '../consts.scss' as consts;
@use '../mixins.scss' as mixins;

.button {
    display: flex;
    
    color: consts.$schema-accent-text;
    background-color: consts.$schema-accent-background;
    padding: 18px;
    gap: consts.$gap-tiny;
    justify-content: center;

    @include mixins.text('heading-7');

    &.--italic {
        font-style: italic;
    }
    
    &.--as-radio {
        color: consts.$schema-text;
        background-color: consts.$schema-background;
        padding: 8px 15px ;
        text-wrap: nowrap;

        @include mixins.text('text-5');        
    }
}

.buttons {
    display: flex;
    gap: consts.$gap-tiny;
}

input:checked + .button.--as-radio {
    color: consts.$schema-accent-text;
    background-color: consts.$schema-accent-background;
}