@use '../variables.scss' as var;

@mixin SnMessage {
    .#{var.$classPrefix}Message-gScope {
        position: fixed;
        // top: 0;
        top: 0;
        right: 0;
        z-index: 1000;
        // width: 100%;
        max-width: 500px;

        display: flex;
        flex-direction: column;
        // align-items: center;
        // pointer-events: none;
        padding: 0.5rem;
    }

    .#{var.$classPrefix}Message {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        background: var(--panel-background-alt);

        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        margin-top: -42px;
        text-align: center;
        opacity: 0;
        transform: scale(0.95) translateY(50px);
        transition: margin-top 0.7s, transform 0.7s, opacity 0.7s;

        &-icon {
            margin-right: 8px;
            padding: 0.5rem;
            border-radius: 100%;

            svg {
                display: block;
            }
        }

        &-close {
            position: absolute;
            top: 0;
            right: 0;
            width: 1.5rem;
            height: 1.5rem;
            cursor: pointer;

            // center
            display: flex;
            align-items: center;
            justify-content: center;
        }

        &.open {
            margin-top: 10px;
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        // Theme
        --snMessageColor: #FFF;
        --snMessageColorLight: #FFF;

        border-top: 0.25rem solid var(--snMessageColor);

        &-icon {
            background: var(--snMessageColorLight);

            svg {
                color: var(--snMessageColor);
            }
        }

        &.info {
            --snMessageColor: var(--sn-color-1);
            --snMessageColorLight: var(--color1-1);
        }

        &.danger {
            --snMessageColor: var(--sn-red);
            --snMessageColorLight: var(--red-1);
        }

        &.success {
            --snMessageColor: var(--sn-green);
            --snMessageColorLight: var(--green-1);
        }

        &.warning {
            --snMessageColor: var(--sn-yellow);
            --snMessageColorLight: var(--yellow-1);
        }
    }
}