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

$class: 'colors-dialog';

.#{$class} {
    width: 680px;
    max-height: 80vh;

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

    &__content {
        width: 100%;
        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%;
        height: 100%;
    }

    &__palette-select {
        width: 100%;
    }

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

    &__palette {
        margin-top: 20px;

        --g-button-background-color: transparent;

        &,
        .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-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
