@use "sass:list";
@use "sass:map";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$notification-spacer: calc(2 * h.useVar("control-spacer")) !default;
$notification-padding: 1.75em 1.75em !default;
$notification-animation: append-animate h.useVar("animation-speed") linear !default;

$notification-color: h.useVar("primary-invert") !default;
$notification-background-color: h.useVar("primary") !default;
$notification-border-radius: h.useVar("border-radius") !default;

$notification-close-top: 0.5em !default;
$notification-close-right: 0.5em !default;
$notification-close-color: h.useVar("white") !default;
$notification-close-size: 1.5rem !default;
$notification-close-border-radius: h.useVar("border-radius-rounded") !default;
$notification-close-background-color: h.useVar("control-shadow-color") !default;

$notification-notices-padding: 2em !default;
$notification-notices-max-width: 600px !default;
$notification-notices-zindex: map.get(vars.$zindex, "tooltip") !default;
/* @docs */

.o-notification {
    @include h.defineVar("notification-spacer", $notification-spacer);
    @include h.defineVar("notification-padding", $notification-padding);
    @include h.defineVar("notification-animation", $notification-animation);
    @include h.defineVar("notification-color", $notification-color);
    @include h.defineVar(
        "notification-background-color",
        $notification-background-color
    );
    @include h.defineVar(
        "notification-border-radius",
        $notification-border-radius
    );

    @include h.defineVar("notification-close-top", $notification-close-top);
    @include h.defineVar("notification-close-right", $notification-close-right);
    @include h.defineVar("notification-close-color", $notification-close-color);
    @include h.defineVar("notification-close-size", $notification-close-size);
    @include h.defineVar(
        "notification-close-border-radius",
        $notification-close-border-radius
    );
    @include h.defineVar(
        "notification-close-background-color",
        $notification-close-background-color
    );

    display: inline-flex;
    flex-direction: row-reverse;
    position: relative;
    transform-origin: 50% 0;

    padding: h.useVar("notification-padding");
    margin-bottom: h.useVar("notification-spacer");

    color: h.useVar("notification-color");

    background-color: h.useVar("notification-background-color");
    border-radius: h.useVar("notification-border-radius");

    animation: h.useVar("notification-animation");
    -webkit-animation: h.useVar("notification-animation");

    // color variants
    @each $name, $pair in vars.$colors {
        &--#{$name} {
            @include h.defineVar(
                "notification-color",
                h.useVar("#{$name}-invert")
            );
            @include h.defineVar(
                "notification-background-color",
                h.useVar($name)
            );

            &:hover {
                // darken color on hover
                filter: brightness(95%);
            }
        }
    }

    &__content {
        flex-basis: auto;
        flex-grow: 1;
        flex-shrink: 1;
        text-align: inherit;
        overflow-y: hidden;
        overflow-x: auto;
    }

    &__wrapper {
        display: flex;
        align-items: center;
        text-align: inherit;
        padding-top: 0;
        border: 0;
    }

    &__icon {
        flex-basis: auto;
        flex-grow: 0;
        flex-shrink: 0;
        margin-right: h.useVar("notification-spacer");
    }

    &__close {
        // add clickable cursor
        @include h.clickable;

        position: absolute;
        top: h.useVar("notification-close-top");
        right: h.useVar("notification-close-right");

        display: inline-flex;
        align-items: center;
        justify-content: center;

        height: h.useVar("notification-close-size");
        width: h.useVar("notification-close-size");
        padding: 0;

        color: h.useVar("notification-close-color");

        border: none;
        border-radius: h.useVar("notification-close-border-radius");
        background-color: h.useVar("notification-close-background-color");
    }
}

.o-notices {
    @include h.defineVar(
        "notification-notices-zindex",
        $notification-notices-zindex
    );
    @include h.defineVar(
        "notification-notices-padding",
        $notification-notices-padding
    );
    @include h.defineVar(
        "notification-notices-max-width",
        $notification-notices-max-width
    );

    position: fixed;
    display: flex;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    overflow: hidden;
    // disable clickable
    pointer-events: none;

    padding: h.useVar("notification-notices-padding");
    z-index: h.useVar("notification-notices-zindex");

    .o-notification {
        pointer-events: stroke;
        max-width: h.useVar("notification-notices-max-width");

        // position variants
        &--top,
        &--bottom {
            align-self: center;
        }

        &--top-right,
        &--bottom-right {
            align-self: flex-end;
        }

        &--top-left,
        &--bottom-left {
            align-self: flex-start;
        }
    }

    &--top {
        flex-direction: column;
    }

    &--bottom {
        flex-direction: column-reverse;

        // Since the columns are reversed, we need to reverse the margin logic from
        // :not(:last-child) to :not(:first-child)
        .o-notification {
            margin-bottom: 0;

            &:not(:first-child) {
                margin-bottom: h.useVar("notification-spacer");
            }
        }
    }
}