@import '../../../../styles/mixins.scss';

$class: 'colors-dialog';

.#{$class} {
    width: 680px;

    .#{$class} &__body {
        padding: 10px 0;
    }

    &__content {
        display: flex;
        min-height: 400px;
        border-top: 1px solid var(--g-color-line-generic);
        border-bottom: 1px solid var(--g-color-line-generic);
    }

    &__palette-container {
        padding: 20px 32px;
        width: 50%;
    }

    &__palette-select {
        width: 100%;
    }

    &__palette-select-popup {
        @include dl-select-popup;
    }

    &__palette {
        margin-top: 20px;

        &,
        .g-palette__row {
            gap: 12px;
        }
    }

    &__palette-item {
        width: 100%;
        height: 100%;
    }

    &__footer {
        width: 100%;
        display: flex;
        gap: 10px;
    }

    &__btn-reset {
        margin-right: auto;
    }

    &__values-list {
        width: 50%;
        border-right: 1px solid var(--g-color-line-generic);
    }

    &__value-color {
        flex: 0 0 20px;
        height: 14px;
        margin-right: 12px;
        border-radius: 2px;

        &_default {
            background-color: var(--g-color-base-generic);
            border: 1px solid var(--g-color-line-generic);
            color: var(--g-color-text-hint);
            font-size: 10px;
            text-transform: uppercase;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
