// light样式
.el-tooltip__popper.is-light{
    background-color: var(--app-color-gray-100);
    box-shadow: 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
    0px 3px 6px 0px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    border: 0;
    color: var(--app-color-white);
}

.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=bottom-start] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=bottom-end] .popper__arrow{
    border-bottom-color: var(--app-color-gray-100);       
    &::after{
        border-bottom-color: var(--app-color-gray-100);   
    } 
}
.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow, 
.el-tooltip__popper.is-light[x-placement^=top-start] .popper__arrow, 
.el-tooltip__popper.is-light[x-placement^=top-end] .popper__arrow{
    border-top-color: var(--app-color-gray-100);       
    &::after{
        border-top-color: var(--app-color-gray-100);   
    }      
}
.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=left-start] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=left-end] .popper__arrow{
    border-left-color: var(--app-color-gray-100);       
    &::after{
        border-left-color: var(--app-color-gray-100);   
    }      
}
.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=right-start] .popper__arrow,
.el-tooltip__popper.is-light[x-placement^=right-end] .popper__arrow{
    border-right-color: var(--app-color-gray-100);    
    &::after{
        border-right-color: var(--app-color-gray-100);   
    }         
}

// dark样式
.el-tooltip__popper.is-dark{
    background-color: var(--app-color-gray-100);
    box-shadow: 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
    0px 3px 6px 0px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    border: 0;
    color: var(--app-color-white);
}

.el-tooltip__popper.is-dark[x-placement^=bottom] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=bottom-start] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=bottom-end] .popper__arrow{
    border-bottom-color: var(--app-color-gray-100);       
    &::after{
        border-bottom-color: var(--app-color-gray-100);   
    } 
}
.el-tooltip__popper.is-dark[x-placement^=top] .popper__arrow, 
.el-tooltip__popper.is-dark[x-placement^=top-start] .popper__arrow, 
.el-tooltip__popper.is-dark[x-placement^=top-end] .popper__arrow{
    border-top-color: var(--app-color-gray-100);       
    &::after{
        border-top-color: var(--app-color-gray-100);   
    }      
}
.el-tooltip__popper.is-dark[x-placement^=left] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=left-start] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=left-end] .popper__arrow{
    border-left-color: var(--app-color-gray-100);       
    &::after{
        border-left-color: var(--app-color-gray-100);   
    }      
}
.el-tooltip__popper.is-dark[x-placement^=right] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=right-start] .popper__arrow,
.el-tooltip__popper.is-dark[x-placement^=right-end] .popper__arrow{
    border-right-color: var(--app-color-gray-100);    
    &::after{
        border-right-color: var(--app-color-gray-100);   
    }         
}