// Notifications

$default-small-spacing: 16px;
$default-large-spacing: 24px;
$half-default-small-spacing: $default-small-spacing * 0.5;

.sd-notification {
    padding: $half-default-small-spacing $default-large-spacing;
    border: 2px solid transparent;
    border-radius: $sd-corner-radius;
    color: $white;
    line-height: $sd-base-line-height;
    font-size: $sd-x-small-text;

    a {
        padding: 1px;
        color: $white;
        font-weight: $sd-font-weight-bold;
        text-decoration: underline;
        &:hover,
        &:focus {
            background-color: rgba($white, 0.3);
        }
        &::after {
            @include ext-icon($white);
        }
    }

    .sd-notification-message-icon,
    .sd-notification-close-icon,
    .sd-notification-action-icon {
        display: flex;
        align-items: center;
        fill: $white;
    }

    .sd-notification-message-icon {
        border: 2px solid $white;
        border-radius: 50%;
    }

    .sd-notification-action-icon {
        &.sd-notification-action-icon-disabled {
            cursor: default;
        }
    }

    &.warning {
        background-color: $yellow;
        color: $gray8;

        a {
            color: $gray8;
            &:hover,
            &:focus {
                background-color: rgba($gray8, 0.1);
            }
            &::after {
                @include ext-icon($gray8);
            }
        }

        &-lite {
            border-color: $yellow;

            .sd-notification-message-icon {
                border-color: $yellow;
                fill: $yellow;
            }
        }

        .sd-notification-message-icon,
        .sd-notification-close-icon,
        .sd-notification-action-icon {
            fill: $gray8;
        }

        .sd-notification-message-icon {
            border-color: $gray8;
        }
    }

    &.info {
        background-color: $ultramarine;

        &-lite {
            border-color: $ultramarine;

            .sd-notification-message-icon {
                border-color: $ultramarine;
                fill: $ultramarine;
            }

            .sd-notification-action-link {
                color: $ultramarine;
            }
        }
    }

    &.success {
        background-color: $accessible-green;

        &-lite {
            border-color: $accessible-green;

            .sd-notification-message-icon {
                border-color: $accessible-green;
                fill: $accessible-green;
            }

            .sd-notification-action-link {
                color: $accessible-green;
            }
        }
    }

    &.error {
        background-color: $dark-scarlet;

        &-lite {
            border-color: $dark-scarlet;

            .sd-notification-message-icon {
                border-color: $dark-scarlet;
                fill: $dark-scarlet;
            }

            .sd-notification-action-link {
                color: $dark-scarlet;
            }
        }
    }

    &[class*='-lite'] {
        background-color: $white;
        color: $gray8;

        a {
            color: $gray8;
            &:hover,
            &:focus {
                background-color: rgba($gray8, 0.1);
            }
            &::after {
                @include ext-icon($gray8);
            }
        }

        .sd-notification-close-icon,
        .sd-notification-action-icon {
            fill: $gray7;
        }
    }

    // Border radius modifications
    &.mod-no-radius {
        border-radius: 0;
    }
    // only mobile
    @include sd-viewport($sd-mobile) {
        padding: $half-default-small-spacing $default-large-spacing $half-default-small-spacing $default-small-spacing;
        &.mod-no-radius-mobile {
            border-radius: 0;
        }
    }
    // only tablet
    @include sd-viewport($sd-tablet) {
        &.mod-no-radius-tablet {
            border-radius: 0;
        }
    }
    // includes mobile and tablet
    @include sd-viewport($sd-mobile-tablet) {
        &.mod-no-radius-mobile-tablet {
            border-radius: 0;
        }
    }
    // includes tablet and desktop
    @include sd-viewport($sd-tablet-plus) {
        &.mod-no-radius-tablet-plus {
            border-radius: 0;
        }
    }
    // only desktop
    @include sd-viewport($sd-desktop) {
        &.mod-no-radius-desktop {
            border-radius: 0;
        }
    }
}

.sd-notification-outer-container {
    @include flex-spaced-centered;
    min-height: 36px;
    @include sd-viewport($sd-mobile) {
        flex-wrap: wrap;
    }

    &.centered {
        @include sd-viewport($sd-tablet-plus) {
            .sd-notification-container {
                justify-content: center;
            }

            .sd-notification-close-icon,
            .sd-notification-action-icon,
            .sd-notification-action-link {
                position: absolute;
                right: $default-large-spacing;
            }

            &.inner {
                .sd-notification-container {
                    position: relative;
                }
            }
        }
    }

    .sd-notification-container {
        @include flex-spaced-centered;
        width: 100%;

        .sd-notification-message-container {
            @include flex-spaced-centered;

            .sd-notification-message-icon {
                flex-shrink: 0;
                margin-right: $default-small-spacing;
            }
        }

        .sd-notification-close-icon,
        .sd-notification-action-icon {
            flex-shrink: 0;
            margin-left: $default-small-spacing;
            margin-right: -$default-small-spacing;

            @include sd-viewport($sd-mobile) {
                margin-left: $half-default-small-spacing;
            }
        }
    }

    .sd-notification-action-link {
        flex-shrink: 0;
        margin-left: $default-small-spacing;

        @include sd-viewport($sd-mobile) {
            margin: 0;
        }
    }
}