@use '../function' as *;
@use '../mixin';

@mixin roolith-block-inline() {
    .block-inline {
        .form-label {
            opacity: 0.5;
            text-transform: uppercase;
            font-size: rem(11);
            padding-bottom: rem(2);
        }
    }

    .block-inline-form {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: var(--r-block-inline-gap);

        @include mixin.breakpoint(medium-up) {
            flex-direction: row;
            align-items: flex-end;
        }

        .form-field {
            padding-bottom: 0;
        }
    }

    .block-inline-button-group {
        display: flex;
        flex-direction: row;
        gap: var(--r-block-inline-gap);
    }

    .block-inline-v-center {
        @include mixin.breakpoint(medium-up) {
            min-height: rem(37);
            display: flex;
            align-items: center;
        }
    }

    .block-inline-alt-section {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        gap: var(--r-block-inline-gap);

        @include mixin.breakpoint(medium-up) {
            margin-left: auto;
            flex-direction: row;
            align-items: flex-end;
        }
    }
}