Row.scss

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

.#{$ns}row {
    display: flex;
    width: var(--df-row-width, 500px);
    max-width: var(--df-row-max-width, 500px);
    margin-bottom: var(--df-spacing-inputs, $df-spacing-inputs);

    &:last-child {
        margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child);
    }

    &__left {
        width: var(--df-row-left-width, 180px);
        min-height: var(--df-row-left-min-height, 28px);
        display: flex;
        margin-bottom: auto;
        flex-direction: column;
        flex-shrink: 0;

        &-inner {
            display: inline;
            margin-top: auto;
            margin-bottom: auto;
        }

        &::after {
            content: '';
            width: 100%;
            flex-shrink: 1;
        }
    }

    &__title {
        word-break: break-word;
        margin-right: var(--df-row-title-margin-right, var(--g-spacing-half));

        &_required {
            &::after {
                content: '*';
                color: var(--g-color-text-danger);
            }
        }
    }

    &__note {
        padding-right: var(--df-row-note-padding-right, var(--g-spacing-4));
        position: relative;

        &-inner {
            position: absolute;
            margin-top: var(--df-row-note-inner-margin-top, var(--g-spacing-0));

            .g-help-popover {
                display: flex;

                & > span {
                    display: flex;
                }
            }
        }
    }

    &__right {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        width: 0;
        margin-left: var(--df-row-right-margin-left, var(--g-spacing-4));

        &-inner {
            display: flex;
            justify-content: space-around;
        }
    }

    &__description {
        margin-top: var(--df-row-description-margin-top, var(--g-spacing-2));
        color: var(--g-color-text-secondary);
        word-break: break-word;
    }

    &__remove-button {
        margin-left: var(--df-remove-button-margin-left, $df-remove-button-margin-left);
    }

    &__required-mark {
        color: var(--g-color-text-danger);
    }

    &__error-wrapper {
        min-width: 100%;
    }
}