@use '../../variables' as *;

$b: '.font-input';

#{$b} {
    &__list {
        display: flex;
        flex-direction: column;
        margin: -4px * 2 0;

        @media (--tablet-landscape-up) {
            flex-direction: row;
            margin: 0 -4px;
        }
    }

    &__item {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        margin: 4px * 2 0;

        @media (--tablet-landscape-up) {
            margin: 0 4px;
        }
    }

    &__label {
        color: $font-input-label-color;
        margin-bottom: 4px;

        @include font($font-input-label-font);

        @media (--tablet-landscape-up) {
            margin-bottom: 0;
            margin-left: $select-padding;
            margin-top: 4px;
            order: 2;
        }
    }

    &__select {
        @media (--tablet-landscape-up) {
            order: 1;
        }
    }
}