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

.dl-color-palette {
    $color-item-size: 28px;

    $class: &;

    display: flex;
    flex-direction: column;

    padding: var(--g-spacing-4);

    &__hint {
        @include text-body-1();
        color: var(--g-color-text-secondary);
        margin-top: var(--g-spacing-2);
    }

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

    &__custom-palette-bg-btn,
    &__palette-list-btn {
        // disable inheritance from theme
        --g-button-border-radius: 6px;
        // disable selected additional background on button
        --g-button-background-color: transparent;
        --g-button-background-color-hover: transparent;
    }

    &__preset {
        display: grid;
        grid-template-columns: repeat(auto-fit, $color-item-size);
        margin-block-end: var(--g-spacing-2);
        gap: var(--g-spacing-2);
        flex-shrink: 0;
    }

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

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

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

        border-radius: 6px;

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

            #{$class}__color-item {
                border: 1px solid 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;
            #{$class}__color-item {
                border-width: 0px;
            }
        }

        &: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;
        }
    }

    &__tooltip-trigger {
        position: absolute;
        inset: 0;
        z-index: 1000;
    }
}
