/*------------------------------------*\
    NOTIFICATION MESSAGE
    This will evolve to support multiple states - currently only success
\*------------------------------------*/

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

@mixin ds_notification-message($notification-colour: settings.$ds_colour__state--positive) {

	@include helpers.ds_block-margins;
	@include helpers.ds_responsive-padding(2, top);
    @include helpers.ds_responsive-padding(2, bottom);
    @include helpers.ds_responsive-padding(2, right);

    background-color: settings.$ds_colour__background--secondary;
    border-left: 0.25rem solid $notification-colour;
    padding-left: 2.75rem;
    position: relative;

    /// [1] ratio of icon height (24px) to .ds_confirmation-message__title line height
    &__icon {
        color: $notification-colour;
        left: 0.75rem;
        position: absolute;
        top: 1.25rem; /// [1]

        @include helpers.ds_media-query-high-contrast {
            color: highlight;
        }

        @include helpers.ds_media-query(medium) {
            top: 1.5rem; /// [1]
        }
    }

    &__title {
        @include helpers.ds_h2-size;
        margin-bottom: 0;
    }

    &__title:not(:first-child) {
        margin-top: 0;
    }

    &__body {
        @include helpers.ds_last-child-no-margin;
        margin-top: 0.5rem;
    }

    /// [1] ratio of icon height (24px) to .ds_confirmation-message__body line height
    &:not(:has(&__title)) &__icon {
        top: 1rem; /// [2]

        @include helpers.ds_media-query(medium) {
            top: 1.25rem; /// [2]
        }
    }

    &:not(:has(&__title)) &__body {
        margin-top: 0;
    }

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

        background: transparent;
        border-width: 0;
        color: settings.$ds_colour__text--secondary;
        display: none;
        height: 2rem;
        padding: 0;
        position: absolute;
        right: 1rem;
        top: 1rem;
        width: 2rem;
        
        &:hover:not(:focus) {
            color: settings.$ds_colour__text--secondary;
        }

        &:focus {
            outline: none;
        }

        > * {
            pointer-events: none;
        }
    }

    &:has(&__close) {
        padding-right: 4rem;
    }

    @include helpers.checkAndFixDescendantLinkColour(settings.$ds_colour__link, settings.$ds_colour__background--secondary, 'notification message');
}

@mixin ds_notification-message-state($notification-colour: settings.$ds_colour__state--positive) {
    border-color: $notification-colour;

    .ds_notification-message__icon {
        color: $notification-colour;
    }
}

.ds_notification-message {
    @include ds_notification-message;

    &--info {
        @include ds_notification-message-state(settings.$ds_colour__state--info);        
    }

    &--warning {
        @include ds_notification-message-state(settings.$ds_colour__state--warning);
    }

    &--error {
        @include ds_notification-message-state(settings.$ds_colour__state--negative);
    }
}

.js-initialised {
    .ds_notification-message__close {
        display: block;
    }
}