:host {
    display: flex;

    &:not(:last-child) {
        margin-bottom: 12px;
    }

    .label {
        width: 30%;
        margin-right: 8px;
        line-height: 20px;
        text-align: right;
    }

    .field {
        flex: 1;
        padding-right: 5px;

        ::ng-deep > * {
            width: 100%;
        }
    }

    .description {
        font-size: 12px;
        color: var(--text-light);
    }
}

:host.left-aligned {
    .label {
        text-align: left;
    }
}

.error {
    margin-top: 2px;
    color: var(--color-red);
}