/*------------------------------------*\
    NOTIFICATION BANNER
\*------------------------------------*/

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

// modifiable vars
$notification-banner__background-colour: settings.$ds_colour__text !default;
$notification-banner__background-colour--success: settings.$ds_colour__state--positive !default;
$notification-banner__colour-icon-colour: settings.$ds_colour__state--warning !default;
$notification-banner__foreground-colour: settings.$ds_colour__white !default;

// fixed vars
$notification-banner__border-width: 0.0625rem; //1px

.ds_notification {
    background: $notification-banner__background-colour;
    border-bottom: $notification-banner__border-width solid $notification-banner__foreground-colour;
    color: settings.$ds_colour__text--reversed;

    &--success {
        background-color: $notification-banner__background-colour--success;
        color: $notification-banner__foreground-colour;
    }

    /// [1] compensate for bottom margin on parent
    &__content {
        align-items: start;
        display: flex;
        gap: 1rem;
        padding: 0.75rem 0 #{0.75rem - $notification-banner__border-width}; /// [1]
        position: relative;

        @include helpers.ds_last-child-no-margin;

        &--has-close {
            padding-right: 2.5rem;
        }
    }

    &__text {
        display: inline-block;
        flex: 1;
        margin-right: 1rem;
        padding: 0.25rem 0;

        @include helpers.ds_last-child-no-margin;
    }

    &__actions {
        margin-top: 2rem;
        text-align: center;

        > * {
            margin-bottom: 1rem;
            margin-top: 0;
            white-space: nowrap;
            width: 100%;
        }
    }

    // specificity hack
    // DEPRECATED - ds_notification__actions - use ds_button-group instead
    .ds_notification__actions {
        margin-bottom: -1rem;
    }

    &__icon {
        color: $notification-banner__colour-icon-colour;
        display: block;
        height: 2rem;
        line-height: 0;
        min-width: 2rem;
        width: 2rem;
    }

    &__close {
        @include helpers.ds_link;
        @include helpers.ds_high-contrast-button;

        background: transparent;
        border-width: 0;
        color: currentColor;
        display: none;
        height: 2rem;
        line-height: 0;
        min-width: 2rem;
        padding: 0.125rem;
        width: 2rem;

        &:hover:not(:focus) {
            color: currentColor;
        }

        > * {
            pointer-events: none;
        }
    }

    //ds_button-group to be used in place of ds_notification__actions
    .ds_button-group {
        //override margins
        @include helpers.ds_responsive-margin(4, top);
    }
}

@include helpers.ds_media-query(medium) {
    /// [1] compensate for bottom margin on parent
    .ds_notification__content {
        gap: 1.5rem;
        padding: 1rem 0 #{1rem - $notification-banner__border-width}; /// [1]
    }

    .ds_notification__text {
        padding: 0;
    }

    // DEPRECATED - ds_notification__actions - use ds_button-group instead
    .ds_notification__actions {
        text-align: left;

        > * {
            width: auto;
        }

        > *:not(last-child) {
            margin-right: 1rem;
        }
    }
}

.js-initialised {
    .ds_notification__close {
        display: block;
    }
}