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

.dialog-color-gradient {
    &__row {
        --gc-form-row-label-width: 220px;
        margin-bottom: var(--g-spacing-4);

        :last-of-type {
            margin-bottom: 0;
        }
    }

    &__palette-select {
        padding-inline-end: var(--g-spacing-2);
        width: var(--gc-form-row-label-width);
        display: inline-block;
    }

    &__reverse-button {
        margin-left: var(--g-spacing-2);
        line-height: 24px;
        vertical-align: middle;
    }

    &__threshold-inputs-wrapper {
        display: flex;
        width: 395px;
        padding-right: 44px;
        justify-content: space-between;
    }

    &__threshold-input {
        display: inline-block;
        width: 100px;
    }

    &__thresholds-checkbox {
        display: inline-block;
    }

    &__preview {
        width: 358px;
        height: 28px;
        background: #000000;
        vertical-align: middle;
    }

    &__select {
        width: 100%;
    }

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

    &__hint-icon {
        margin-left: var(--g-spacing-1);
    }

    &__hint-icon-tooltip {
        max-width: 280px;
    }
}
