@use '../../variables' as *;

$b: '.color-input';

#{$b} {
    display: flex;
    flex-wrap: wrap;
    margin: 4px * -1;

    &__color {
        align-items: center;
        border: $color-input-border-width solid $color-input-border-color;
        border-radius: $color-input-radius;
        cursor: pointer;
        display: flex;
        height: 4px * 9;
        justify-content: center;
        margin: 4px;
        transition-duration: var(--duration-micro-s);
        transition-property: border-color;
        transition-timing-function: var(--easing-standard);
        width: 4px * 9;

        &_active {
            border-color: $color-input-active-border-color;
            cursor: default;
        }
    }

    &__example {
        align-items: center;
        border-radius: $color-input-radius;
        display: flex;
        height: 4px * 7;
        justify-content: center;
        position: relative;
        transition-duration: var(--duration-micro-s);
        transition-property: background-color;
        transition-timing-function: var(--easing-standard);
        width: 4px * 7;

        &_transparent {
            background-image:
                linear-gradient(45deg, $color-grey-80 25%, transparent 25%),
                linear-gradient(-45deg, $color-grey-80 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, $color-grey-80 75%),
                linear-gradient(-45deg, transparent 75%, $color-grey-80 75%);
            background-position:
                0 0,
                0 5px,
                5px -5px,
                -5px 0;
            background-size: 10px 10px;
        }

        &_autocolor {
            background-image: linear-gradient(90deg, $color-white 50%, $color-grey 50%);
        }
    }

    &__icon {
        height: 4px * 3;
        position: absolute;
        transition-duration: var(--duration-micro-s);
        transition-property: fill;
        transition-timing-function: var(--easing-standard);
        width: 4px * 3;

        &_dark {
            fill: $color-input-icon-dark-color;
        }

        &_light {
            fill: $color-input-icon-light-color;
        }

        #{$b}__example_autocolor & {
            &:first-child {
                clip: rect(auto, 6px, auto, auto);
                fill: $color-input-icon-dark-color;
            }

            &:last-child {
                clip: rect(auto, auto, auto, 6px);
                fill: $color-input-icon-light-color;
            }
        }
    }
}