@use './src/styles/layouts' as *;
@use './src/styles/variables' as *;
@use './src/styles/screen' as *;

@mixin main-buttons() {
    buy-ticket-button,
    registration-button,
    flight-status-button,
    flight-details-button {
        @content();
    }
}

@mixin small-buttons() {
    print-button,
    share-button {
        @content();
    }
}
:host {
    display: flex;
    justify-content: flex-end;

    & > .k-space {
        flex: 1;

        @include mobile() {
            display: none;
        }
    }

    @include gt-mobile() {
        @include h-spacing($space-m);

        @include main-buttons() {
            width: 150px;
        }
    }

    @include mobile() {
        flex-wrap: wrap;
        justify-content: start;
        @include v-spacing($space-l, true);

        @include main-buttons() {
            order: 1;
            flex: 100%;
        }

        @include small-buttons() {
            order: 2;
        }

        share-button {
            margin-bottom: 0;
        }
    }
}
