@import '~@gravity-ui/uikit/styles/mixins';

.color-picker-input-with-preset {
    $class: &;
    display: inline-block;
    position: relative;
    width: 100%;

    $color-item-size: 28px;

    &__palette-list {
        display: flex;
        flex-direction: column;
        padding: var(--g-spacing-4);
    }

    &__preset {
        margin-block-end: var(--g-spacing-2);
    }

    &__palette {
        margin-block-start: var(--g-spacing-5);
    }

    &__color-picker {
        display: block;
        width: 140px;
        min-width: 100%;
    }

    &__custom-palette-bg-btn,
    &__highlight-wrapper {
        width: $color-item-size;
        height: $color-item-size;
        flex-grow: 0;
        flex-shrink: 0;
    }

    &__custom-palette-bg-btn,
    &__palette-list-btn {
        // disable inheritance from theme
        --g-button-border-radius: 6px;
    }

    &__palette-list-btn,
    &__custom-palette-bg-btn {
        // disable selected additional background on button
        --g-button-background-color: transparent;
        --g-button-background-color-hover: transparent;
    }

    &__highlight-wrapper {
        --_--color-item-border-color: transparent;
        position: relative;
        border-radius: 6px;

        &_with-border {
            --_--color-item-border-color: var(--g-color-line-generic);
        }

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            border: 1px solid var(--_--color-item-border-color);
            border-radius: 6px;
        }

        &_selected,
        &:hover {
            --_--color-item-border-color: transparent;
        }

        &:not(&_selected):hover::before {
            content: '';
            position: absolute;
            inset: -3px;
            border: 2px solid var(--g-color-line-generic-hover);
            border-radius: 9px;
        }

        &_selected::before {
            content: '';
            position: absolute;
            inset: -3px;
            border: 2px solid var(--g-color-line-brand);
            border-radius: 9px;
        }
    }

    &__color-item {
        display: inline-block;
        width: $color-item-size;
        height: $color-item-size;
        background-clip: padding-box;

        &_transparent {
            background-image: repeating-conic-gradient(
                var(--g-color-base-generic) 0 25%,
                var(--g-color-base-background) 0 50%
            );
            border: 1px solid transparent;
        }

        &_widget-bg {
            background-color: var(--g-color-base-float);
        }
    }

    &__theme {
        background-clip: padding-box;
        background-color: var(--g-color-base-float);
        width: $color-item-size;
        height: $color-item-size;
        overflow: hidden;
    }

    &__theme,
    &__color-item {
        border-radius: 6px;
    }
}
