:host {
    display: block;
}

.form-group {
    label {
        font-size: var(--font-size-sm);
        color: var(--color-weight-800);
        margin-bottom: 4px;
        display: inline-block;
    }
}
.tooltip-text {
    font-size: var(--font-size-xs);
    line-height: var(--font-size-sm);
    margin-bottom: 4px;
}
.input-row {
    display: flex;
}

::ng-deep .input-row {
    input:not([type='checkbox']),
    select,
    textarea,
    ng-select,
    vdr-zone-selector,
    vdr-facet-value-selector,
    vdr-option-value-input,
    vdr-affixed-input,
    vdr-currency-input,
    vdr-rich-text-editor {
        width: 100%;
    }
}

::ng-deep .input-row.readonly {
    input:not([type='checkbox']),
    select,
    textarea,
    ng-select,
    vdr-zone-selector,
    vdr-facet-value-selector,
    vdr-option-value-input,
    vdr-affixed-input,
    vdr-currency-input,
    vdr-rich-text-editor {
        &[readonly] {
            cursor: not-allowed;
        }
    }
}

.input-row {
    input:not([type='checkbox']),
    select,
    textarea {
        width: 100%;
    }
}

::ng-deep .input-row.has-toggle input:not([type=checkbox]):not([type=radio]) {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

.edit-button {
    border: 1px solid var(--color-weight-200);
    border-radius: var(--border-radius-input);
    border-inline-start-width: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    &.enabled {
        color: var(--color-primary-700);
        background-color: var(--color-primary-100);
    }
}