toggle-corp/react-store

@import '../../../stylesheets/input-label';

.color-input {
    .label {
        @extend %input-label;
        padding-bottom: var(--spacing-extra-small);
    }

    .color-box {
        outline: none;
        border: var(--width-separator-medium) solid var(--color-separator);
        background-color: transparent;
        cursor: pointer;
        padding: var(--spacing-extra-small);

        .color {
            display: block;
            width: 32px;
            min-height: var(--font-size-medium);
        }

        &.disabled {
            cursor: default;

            .color {
                filter: grayscale(100%);
            }
        }

        &:hover {
            border-bottom-color: var(--color-separator-hover);
        }

        &:focus {
            border-bottom-color: var(--color-accent);
        }

        &.read-only {
            border-bottom-color: var(--color-separator);
            cursor: default;
        }
    }

    %base {
        margin: var(--spacing-extra-small) 0 0;
        font-size: var(--font-size-extra-small);
    }

    &.disabled {
        .label {
            color: var(--color-text-disabled);
        }
    }
}

.color-floating-container {
    display:flex;
    border: none;
    box-shadow: none;
    background-color: transparent;
    max-height: calc(49vh);

    .swatches-container {
        display: flex;
        flex-direction: column;
        margin-left: var(--spacing-small);
        border-radius: var(--radius-border-large);
        background-color: var(--color-foreground-alt);
        width: 360px;
        overflow-y: auto;

        .header-container {
            flex-shrink: 0;
            padding: var(--spacing-medium);
            padding-bottom: 0;
        }

        .swatches-picker {
            display: flex;
            flex-grow: 1;
            flex-wrap: wrap;

            .swatch {
                display: flex;
                flex-direction: column;
                padding: var(--spacing-small);

                .color-block {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: var(--spacing-extra-small);
                    padding: 0;
                    width: 16px;
                    height: 16px;
                }
            }
        }
    }
}