@import "./var.less";
@import "./mixin.less";

.@{prefixCls}-color {
    width: 240px;
    background: @color-neutral8;
    box-shadow: @box-shadow-md;
    border-radius: @border-radius;

    &-main {
        padding: 10px 16px 16px 16px;

        .@{prefixCls}-color-slider {
            .size(168px, 8px);
        }
    }

    &-hue {
        display: flex;
        justify-content: space-between;
    }

    &-slider {
        position: relative;
        margin-bottom: @base-space*2;

        &-one {
            .@{prefixCls}-color-layer {
                position: absolute;
                top: 1px;
                right: 0;
                bottom: 1px;
                left: 0;
                border-radius: 5px;;
            }
        }

        &-two {
            overflow: hidden;
            border-radius: 4px;

            .@{prefixCls}-color-layer {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
        }

        &-inner {
            position: absolute;
            top: 0;
            right: 4px;
            bottom: 0;
            left: 4px;

            &-two {
                right: 0;
                left: 0;
            }
        }

        &-dragger {
            .size(8px);
            box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.8);
            border: 2px solid #fff;
            border-radius: 50%;
            background-color: @color-primary6;
            position: absolute;
            top: 0;
            cursor: pointer;
        }

        &-two {
            height: 160px;

            .@{prefixCls}-color-slider-dragger {
                transform: translate(-5px, -5px);
            }
        }
    }

    &-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: @base-space*2;

        .@{prefixCls}-color-board {
            flex: 0 0 24px;
            margin-left: @base-space*2;
        }
    }

    &-board {
        .size(24px);
        position: relative;
        box-shadow: @box-shadow-md;

        .@{prefixCls}-color-layer {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border-radius: @border-radius-base;
        }
    }

    &-customize {
        margin: @base-space*2 0;
        border-top: 1px solid @color-neutral5;

        &-header {
            .font-height(12px);
            display: flex;
            justify-content: space-between;
            margin: @base-space*2 0;

            &-operations {
                .@{prefixCls}-icon {
                    margin-left: @base-space*3;
                    cursor: pointer;

                    &:hover {
                        svg {
                            color: @color-primary7;
                        }
                    }
                }
            }
        }

        &-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 0 -@base-space;

            .@{prefixCls}-color-swatch {
                .size(20px);
                border-radius: @border-radius-base;
                margin: @base-space;
                cursor: pointer;
                position: relative;

                .@{prefixCls}-color-layer {
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                    border-radius: @border-radius-base;
                }
            }
        }
    }

    &-layer {

        &-hue {
            background: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%);
        }

        &-alpha {
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==)
        }

        &-saturation {
            background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
        }

        &-light {
            background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
        }
    }

    &-fields {
        display: flex;

        .@{prefixCls}-input-number {
            width: 48px;
        }

        &-left {
            flex: 1;

            &-input {
                display: flex;
                justify-content: space-between;

                .@{prefixCls}-input-number {
                    flex: 1;
                }
            }

            .@{prefixCls}-popper-trigger {
                width: 100%;
                display: block;

                > span {
                    width: 100%;
                }
            }

            &-switch {
                display: flex;
                position: relative;
                .font-height(12px);
                margin: @base-space 0 @base-space*2 0;

                div {
                    flex: 1;
                    text-align: center;
                }

                .@{prefixCls}-icon {
                    position: absolute;
                    right: 0;
                    top: 7px;
                    opacity: 0;
                }

                &:hover {
                    background: @color-neutral5;

                    .@{prefixCls}-icon {
                        opacity: 1;
                    }
                }
            }

        }

        &-right {
            flex: 0 0 56px;
            text-align: right;

            > div:last-child {
                text-align: center;
                .font-height(12px);
                margin-top: @base-space;
            }
        }
    }
}