@use '~flux/components/css/mixin';

.colorPicker {
    --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);

    display: flex;
    flex-flow: column;
    gap: 15px;
}

.colorPickerPreview {
    position: relative;
    height: 60px;
    width: 60px;
    border-radius: var(--radius);
    overflow: hidden;

    &::after,
    &::before {
        position: absolute;
        inset: 0;
        content: '';
        border-radius: inherit;
    }

    &::before {
        background: var(--transparent) repeat center;
    }

    &::after {
        background: var(--color);
        box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
    }
}

.colorPickerSaturation {
    background: var(--pickerBackground, black);
    border: 0;

    &::before,
    &::after {
        position: absolute;
        content: '';
        inset: 0;
        border-radius: inherit;
    }

    &::before {
        background: linear-gradient(to right, white, transparent);
    }

    &::after {
        background: linear-gradient(to top, black, transparent);
        box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
    }
}

.colorPickerSlider {
    position: relative;
    margin-left: 0;
    margin-right: 0;

    .sliderTrackValue {
        background: unset;
    }
}

.colorPickerAlphaSlider {
    composes: colorPickerSlider;

    .sliderTrack {
        background: var(--transparent) repeat center;
    }
}

.colorPickerHueSlider {
    composes: colorPickerSlider;

    .sliderTrack {
        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));
        border-color: rgb(0 0 0 / .1);
    }
}

.colorPickerValue {
    display: flex;
    align-items: flex-end;
    gap: 9px;

    .formFieldLabel {
        @include mixin.text(2xsmall);

        min-height: unset;
    }

    .formInput {
        height: 36px;
    }
}

.colorSelect {
    display: flex;
    flex-flow: row wrap;
    gap: 9px;
}

.colorSelectItem {
    display: flex;
    height: 30px;
    width: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    cursor: pointer;
    transition: 150ms var(--swift-out);
    transition-property: background, border, scale;

    .icon {
        transition: inherit;
        transition-property: scale;
    }

    @include mixin.hover {
        scale: 1.1;
    }

    &:active {
        scale: .9;
    }
}

.colorSelectColor {
    composes: colorSelectItem;

    background: var(--color);
    border: 2px solid color-mix(in srgb, var(--color), black 9%);
}

.colorSelectColorDeselected {
    composes: colorSelectColor;

    .icon {
        scale: .5;
    }
}

.colorSelectColorSelected {
    composes: colorSelectColor;

    background: transparent;
    border: 3px solid var(--color);
}

.colorSelectCustom {
    composes: colorSelectItem;

    background: var(--gray-50);
    border: 1px solid var(--gray-200);
}

.colorSelectCustomPicker {
    width: 330px;
}

.colorSelectButtons {
    display: flex;
    padding-top: 0;
    gap: 9px;

    .button:first-child {
        flex-grow: 1;
    }
}

.colorSelectCheck {
    color: var(--color);

    :is(path) {
        stroke: currentColor;
        stroke-width: 54px;
    }
}