@import "variables";

:host {
    display: block;
    .form-group > label:first-child {
        top: 16px;
    }
    .form-group > label:nth-of-type(2) {
        flex: 1;
        max-width: 20rem;

        ::ng-deep > *:not(.tooltip-content) {
            width: 100%;
        }
    }
    .form-group .tooltip-validation {
        height: initial;
    }
    .form-group.no-label {
        margin: -6px 0 0 0;
        padding: 0;
        justify-content: center;
        > label {
            position: relative;
            justify-content: center;
        }
        .input-row {
            justify-content: center;
        }
    }
    .input-row {
        display: flex;
        ::ng-deep input {
            flex: 1;
            &[readonly] {
                background-color: $color-grey-200;
            }
        }
        button.edit-button {
            margin: 0;
            border-radius: 0 3px 3px 0;
        }

        &.has-toggle {
            ::ng-deep input {
                border-top-right-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
                border-right: none;
            }
        }
        ::ng-deep clr-toggle-wrapper {
            margin-top: 8px;
        }
    }
}
