

@import "../../scss/theme/config";
$arrow:5px; //箭头大小
$gap:8px; //箭头与目标的间距
$bg:rgba(51, 51, 51, 0.90);
$Distance:15px;
.cd-toast {
    position: absolute;
    z-index: 1050;
    padding: 0px 10px;
    font: 12px/1.5 Arial, '\5fae\8f6f\96c5\9ed1', sans-serif;
    opacity: 0;
    background: $bg;
    border-radius: 2px;
    transition: opacity 0.3s ease;
    .cs-toast-arrow {
        pointer-events: none;
    }
    &.cd-right {
        transform: translateX($gap);
        .cd-toast-arrow {
            // pointer-events: none;
            border: {
                left: $arrow solid transparent;
                top: $arrow solid transparent;
                bottom: $arrow solid transparent;
                right: $arrow solid $bg;
            }
            left: -$arrow*2;
            top: 50%;
            margin-top: -$arrow;
        }
    }
    &.cd-left {
        transform: translateX(-$gap);
        .cd-toast-arrow {
            border: {
                right: $arrow solid transparent;
                left: $arrow solid $bg;
                bottom: $arrow solid transparent;
                top: $arrow solid transparent;
            }
            right: -$arrow*2;
            margin-top: -$arrow;
            top: 50%;
        }
    }
    &.cd-left-top {
        transform: translateY(-$gap);
        .cd-toast-arrow {
            border: {
                right: $arrow solid transparent;
                left: $arrow solid transparent;
                bottom: $arrow solid transparent;
                top: $arrow solid $bg;
            }
            right: $Distance;
            margin-left: -$arrow/2;
            bottom: -$arrow*2;
        }
    }
    &.cd-top {
        transform: translateY(-$gap);
        .cd-toast-arrow {
            border: {
                right: $arrow solid transparent;
                left: $arrow solid transparent;
                bottom: $arrow solid transparent;
                top: $arrow solid $bg;
            }
            left: 50%;
            margin-left: -$arrow;
            bottom: -$arrow*2;
        }
    }
    &.cd-right-top {
        transform: translateY(-$gap);
        .cd-toast-arrow {
            border: {
                right: $arrow solid transparent;
                left: $arrow solid transparent;
                bottom: $arrow solid transparent;
                top: $arrow solid $bg;
            }
            left: $Distance;
            margin-left: -$arrow/2;
            bottom: -$arrow*2;
        }
    }
    &.cd-bottom {
        transform: translateY($gap);
        .cd-toast-arrow {
            border: {
                left: $arrow solid transparent;
                top: $arrow solid transparent;
                right: $arrow solid transparent;
                bottom: $arrow solid $bg;
            }
            left: 50%;
            top: -$arrow*2;
            margin-left: -$arrow;
        }
    }
    &.cd-right-bottom {
        transform: translateY($gap);
        .cd-toast-arrow {
            border: {
                left: $arrow solid transparent;
                top: $arrow solid transparent;
                right: $arrow solid transparent;
                bottom: $arrow solid $bg;
            }
            left: $Distance;
            top: -$arrow*2;
            margin-left: -$arrow/2;
        }
    }
    &.cd-left-bottom {
        transform: translateY($gap);
        .cd-toast-arrow {
            border: {
                left: $arrow solid transparent;
                top: $arrow solid transparent;
                right: $arrow solid transparent;
                bottom: $arrow solid $bg;
            }
            right: $Distance;
            top: -$arrow*2;
            margin-left: -$arrow/2;
        }
    }
    &.show {
        visibility: visible;
        opacity: 1;
    }
    .cd-toast-arrow {
        position: absolute;
        width: 0;
        height: 0;
        font-size: 0;
        line-height: 0;
        margin: 0;
    }
    .cd-toast-title {
        margin: 10px 0px 0px;
        padding-bottom: 3px;
        color: #fff;
        font-size: 12px;
        font-weight: 500;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
    }
    .cd-toast-content {
        margin: 5px 0px 8px;
        max-width: 150px;
        font-size: 12px;
        color: $colorWhite;
        letter-spacing: 0;
    }
}