@use './_mixin.scss';

// Notification
.etafe-notification {
    --color: #3ee64a;

    position: fixed;
    right: 20px;
    display: grid;
    grid-template-columns: max-content 1fr 30px;
    align-items: center;
    gap: 20px;
    background: #626262;
    padding: 10px 20px;
    width: 300px;
    border-radius: 4px;
    bottom: 100px;
    border: 1px solid;
    background-color: color-mix(in oklab, white 80%, var(--color));
    border-color: var(--color);
    animation: 300ms ease-in etafe_slide_right_in;
    z-index: 99999;

    &[data-type="success"] {
        --color: #3ee64a;
    }

    &[data-type="warning"] {
        --color: green;
    }

    &[data-type="error"] {
        --color: red;
    }

    &>span {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        height: 30px;
        border-radius: 4px;
        cursor: pointer;
        transition: background 200ms ease-in;

        svg {
            fill: #635b5b;
            transition: fill 200ms ease-in;
        }

        &:hover {
            background: #fff;

            svg {
                fill: #000;
            }
        }
    }

    p {
        margin: 0;
        font-size: 16px;
        color: #282828;
    }

    svg {
        width: 20px;
        height: 20px;
    }

    div:first-child {
        width: 40px;
        height: 40px;
        @include mixin.flex-center;
        background: var(--color);
        border-radius: 50%;

        span {
            width: 20px;
            height: 20px;
        }

        svg {
            fill: #fff;
        }
    }

    &--hide {
        transition: transform 300ms ease-out;
        transform: translateX(110%);
    }
}

@keyframes etafe_slide_right_in {
    0% {
        opacity: 0;
        transform: translateX(110%);
    }

    50% {
        opacity: 0.5;
        transform: translateX(50%);
    }

    80% {
        opacity: 0.8;
        transform: translateX(20%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}