.app-color-picker{
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    border: 1px solid #e6e6e6;
    padding: 3px;
    border-radius: 2px;
    cursor: pointer;
    z-index: 66666665;

    .app-color-picker-trigger-span {
        position: relative;
        display: block;
        height: 100%;
        background: forestgreen;
        .app-color-picker-trigger-span-i{
            position: absolute;
            top: 3px;
            left: 1px;
            color: #fff;
            font-size: 14px;
        }
    }

    .app-color-picker-main {
        position: absolute;
        z-index: 66666666;
        width: 280px;
        padding: 7px;
        background: #FFF;
        border: 1px solid #d2d2d2;
        border-radius: 2px;
        box-sizing: content-box;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12);

        .app-color-picker-main-wrapper {
            position: relative;
            height: 180px;


            .app-color-picker-basis {
                position: relative;
                width: 260px;
                height: 100%;

                .app-color-picker-basis-white {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: linear-gradient(90deg, #FFF, hsla(0, 0%, 100%, 0))
                }

                .app-color-picker-basis-black {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: linear-gradient(0deg, #000, transparent)
                }

                .app-color-picker-basis-cursor {
                    width: 10px;
                    height: 10px;
                    border: 1px solid #FFF;
                    border-radius: 50%;
                    position: absolute;
                    top: -3px;
                    right: -3px;
                    cursor: pointer
                }
            }

            .app-color-picker-side {
                position: absolute;
                top: 0;
                right: 0;
                width: 12px;
                height: 100%;
                background: linear-gradient(red, #FF0, #0F0, #0FF, #00F, #F0F, red);

                .app-color-picker-side-slider {
                    width: 100%;
                    height: 5px;
                    box-shadow: 0 0 1px #888;
                    box-sizing: border-box;
                    background: #FFF;
                    border-radius: 1px;
                    border: 1px solid #f0f0f0;
                    cursor: pointer;
                    position: absolute;
                    left: 0
                }
            }
        }

        .app-color-picker-main-input {
            padding-top: 7px;
            display: flex;
            justify-content: space-between;

            .app-color-picker-inline{
                margin-right: 10px;
                font-size: 14px;

                input{
                    width: 130px;
                    height: 30px;
                    line-height: 30px;
                    color: #666
                }
            }

            .app-color-picker-btn-container{
                text-align: right;

                button{
                    margin-right: 0;
                    margin-left: 8px;
                }
            }
        }
    }

    &:hover{
        border-color: #d2d2d2;
    }

    &.app-color-picker-disabled{
        .app-color-picker-mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            cursor: not-allowed;
            background-color: rgba(255,255,255,.7);
        }

    }


    .play-up-enter-active, .play-up-leave-active {
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .play-up-enter, .play-up-leave-to, .play-up-leave-active{
        transform: translateY(40px);
        opacity: 0;
    }
}