@import "./bggrid-func.less";

pointer {
    display: block;
    height: 6px;
    outline: 1px solid #fff;
    background: #ccc;
    top: 0;
    left: 0;
    box-sizing: border-box;
    position: absolute;
}

>div {
    display: inline-block;
    position: relative;


    &+div {
        margin-left: 10px;
    }

    &.pad {
        font-size: 0;

        >pointer {
            width: 6px;
            margin: -3px;
        }

        >canvas {
            width: 256px;
            height: 256px;
            background: #fff;
        }
    }

    &.hue,
    &.opa {
        font-size: 0;

        >pointer {
            margin: -3px -1px;
            width: 10px;
            padding: 0 1px;
            box-sizing: content-box;
        }

        >canvas {
            background: #fff;
            width: 10px;
            height: 256px;
            .grid();
        }
    }

    &.val {
        margin: 0;
        padding: 10px 0 0 0;

        >input {

            &:focus {
                z-index: 1;
            }

            color: inherit;
            text-transform : lowercase;
            background-color: transparent;
            box-sizing : border-box;
            padding : 0 3px;
            position : relative;
            font-size : 12px;
            border : none;
            text-align : left;
            min-width : 40px;
            width : 30%;
        }

        >.hex {
            width: 76px;
        }

        >.rgb {
            width: 156px;
        }

        >.hsl {
            width: 186px;
        }
    }
}

& {
    width: 462px;
    min-width: 372px;
    background: #fff;
    padding: 17px 0 7px 0;
    text-align: center;
    user-select: none;
    border-radius: 3px;
    position: relative;
}

&>.bg {
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-color: inherit;
    border: 2px solid;
    border-bottom-width: 26px;
    position: absolute;
}