@import "../../theme.less";
@import "./hsb-picker";

@colorpicker-control-height: 1.5rem;
@colorpicker-input-height: 1.25rem;
@colorpicker-icon-size: 1rem;

.color-picker {
    height: @colorpicker-control-height;
    position: relative;
    width: 100%;

    &__wrapper {
        background-color: @color-back;
        display: inline-flex;
        flex-direction: column;
        left: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        width: 100%;
    }

    &--focused &__wrapper {
        border: @size-border solid @color-border;
        box-sizing: border-box;
        z-index: 1;
    }

    &__input {
        background-color: @color-control-active;
        border: none;
        box-sizing: border-box;
        color: @color-control-fore;
        height: @colorpicker-input-height;
        margin-top: @size-border;
        text-align: center;
        width: 100%;
    }

    &--focused &__input {
        margin-top: 0;
    }

    &__preview {
        cursor: pointer;
        display: inline-block;
        height: @colorpicker-icon-size;
        left: (@colorpicker-control-height - @colorpicker-icon-size) / 2;
        position: absolute;
        top: (@colorpicker-control-height - @colorpicker-icon-size) / 2;
        width: @colorpicker-icon-size;
    }

    &--focused &__preview {
        left: (@colorpicker-control-height - @colorpicker-icon-size) / 2 - @size-border;
        top: (@colorpicker-control-height - @colorpicker-icon-size) / 2 - @size-border;
    }

    &__reset {
        background-image: @icon-reset;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: @colorpicker-icon-size;
        cursor: pointer;
        display: inline-block;
        height: @colorpicker-icon-size;
        position: absolute;
        right: (@colorpicker-control-height - @colorpicker-icon-size) / 2;
        top: (@colorpicker-control-height - @colorpicker-icon-size) / 2;
        width: @colorpicker-icon-size;
    }

    &--focused &__reset {
        right: (@colorpicker-control-height - @colorpicker-icon-size) / 2 - @size-border;
        top: (@colorpicker-control-height - @colorpicker-icon-size) / 2 - @size-border;
    }

    &__textbox-line {
        width: 100%;
    }

    &__hsb-line {
        display: none;
        width: 100%;
    }

    &--focused &__hsb-line {
        border-color: @color-border;
        display: block;
    }
}
