@import "mixins/mixins";
@import "common/var";

.focus-message {
    position: fixed;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    transition: opacity 0.3s, transform .4s;
    overflow: hidden;

    @include when(center) {
        justify-content: center;
    }

    p {
        margin: 0;
    }

    .focus-message-content {
        padding: 0;
        font-size: $--font-size-base;
        line-height: $--line-height-base;
        &:focus {
            outline-width: 0;
        }
    }

    .alert-con{
        &.no-icon,
        &.alert-state.no-icon{
            padding: 5px 10px;
            color: $--color-white;
            font-size: $--font-size-base;
            line-height: $--line-height-base;
            border-radius: $--border-radius-base;
        }

        &.alert-info.no-icon{
            color: $color-black;
        }

        &.alert-succ{
            background-color: #00b200;
        }
        &.alert-warn{
            background-color: $color-yellow;
        }
        &.alert-err{
            background-color: $color-red;
        }

    }
}

.focus-message-fade-enter,
.focus-message-fade-leave-active {
    opacity: 0;
    transform: translate(-50%, -100%);
}