@import '../../common/styles/theme.less';
.sp-message {
    width: fit-content;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    background-color: var(--color-white);
    padding: 10px 16px;
    box-shadow:0 3px 6px -4px #0000001f,0 6px 16px #00000014,0 9px 28px 8px #0000000d;
    border-radius: 2px;
    align-items: center;
    transition: opacity .2s, transform 0.3s, top .3s;
    opacity: 1;
    background-color: #fff;

    &-content {
        display: flex;
        flex: 1;
        color: #000000d9;
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum";
        pointer-events: none
    }

    .sp-icon {
        font-size: 15px;
        margin-right: 8px;
    }

    .sp-icon-close {
        margin-left: 10px;
        font-size: 15px;
        color: var(--color-text-secondary);
        cursor: pointer;
        font-weight: bold;

        &:hover {
            color: var(--color-primary);
        }
    }

    &-fade-enter,
    &-fade-leave {
        opacity: 0;
        transform: translate(-50%, -100%)
    }

    &-fade-enter-active {
        opacity: 1;
        transform: translate(-50%, 0%)
    }
}