@import '_mixins';
@import '_vars';

// sass-lint:disable single-line-per-selector

.notification-container {
    & {
        @include force-width(30rem);
        @include fixed;
        margin: .625rem;
        z-index: 100000;
    }

    .alert {
        max-height: 20rem;

        &::ng-deep {
            p {
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }

    &-top-right {
        @include fixed(0, 0, auto, auto);
    }

    &-top-left {
        @include fixed(0, auto, auto, 0);
    }

    &-bottom-right {
        @include fixed(auto, 0, 0, auto);
    }

    &-bottom-left {
        @include fixed(auto, auto, 0, 0);
    }

    .overlayed {
        position: relative;
    }

    .overlay {
        @include absolute(0, auto, 0, 0);
        animation: width 10s 1 linear;
        background: $color-white;
        border: 0;
        opacity: .1;
        overflow: hidden;
        width: 100%;
    }
}

@keyframes width {
    100% {
        width: 0;
    }
}

$caret-size: 6px;

.tooltip2 {
    & {
        background: $color-tooltip;
        color: $color-dark-foreground;
        font-size: .9rem;
        font-weight: normal;
        padding: .5rem;
        white-space: nowrap;
    }

    &-left {
        &::after {
            @include caret-right($color-tooltip, $caret-size);
            @include absolute(50%, -$caret-size * 2, auto, auto);
            margin-top: -$caret-size;
        }
    }

    &-right {
        &::after {
            @include caret-left($color-tooltip, $caret-size);
            @include absolute(50%, auto, auto, -$caret-size * 2);
            margin-top: -$caret-size;
        }
    }

    &-top {
        &::after {
            @include caret-bottom($color-tooltip, $caret-size);
            @include absolute(auto, auto, -$caret-size * 2, 50%);
            margin-left: -$caret-size;
        }
    }

    &-bottom {
        &::after {
            @include caret-top($color-tooltip, $caret-size);
            @include absolute(-$caret-size * 2, auto, auto, 50%);
            margin-left: -$caret-size;
        }
    }
}