/*------------------------------------*\
    PHASE BANNER
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

.ds_phase-banner {
    background: settings.$ds_colour__background--tertiary;
    border-top: 0.0625rem solid transparent;
    @include helpers.ds_small-size;
    @include helpers.ds_responsive-padding(2, top, $tuning: -0.0625rem);
    @include helpers.ds_responsive-padding(2, bottom);

    &__content {
        align-items: baseline;
        display: flex;
        margin-bottom: 0;

        // DEPRECATED - this will be removed in a future version
        &--stacked {
            flex-direction: column;

            > *:not(:last-child) {
                @include helpers.ds_responsive-margin(1, bottom);
            }
        }
    }

    &__tag.ds_tag {
        @include helpers.ds_responsive-margin(2, right);
        @include helpers.ds_small-size;
    }

    @include helpers.checkAndFixDescendantLinkColour(settings.$ds_colour__link, settings.$ds_colour__background--tertiary, 'phase banner');
}