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

.dialog-color-palette {
    &__container {
        display: flex;
        height: calc(100%);
        border-top: 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;
        }
    }

    &__palette-container {
        position: relative;
        width: 50%;
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
    }

    &__palette-container &__row {
        margin-bottom: 0;
    }

    &__row {
        margin: 0 24px;
    }

    &__palette {
        height: 230px;
        margin: 20px 24px 0;
    }

    &__palette-select {
        padding: 20px 28px 0 24px;
    }

    &__label {
        display: inline-block;
        margin-right: 20px;
    }
}
