@import "~styles/variables.scss";

:host {
    ::ng-deep {
        // Workaround for https://github.com/angular/components/issues/4580#issuecomment-340692923
        mat-form-field  {
            .mat-form-field-underline {
                position: relative;
                bottom: auto;
            }
            .mat-form-field-subscript-wrapper {
                position: static;
            }
        }

        //https://github.com/angular/components/issues/4580#issuecomment-386759677
        //For angular 6 or higher, the following css might be needed
        //mat-form-field .mat-form-field {
        //  &-underline {
        //    position: static;
        //  }
        //  &-subscript-wrapper {
        //    position: static;
        //  }
        //}
    }

    display: flex;
    align-items: baseline;

    &.wide {
        label {
            min-width: 282px;

            text-align: right;
            padding-right: 24px;
        }
    }

    &.narrow {

    }

    &.regular {
        label {
            flex: 1;
            display: flex;
            color: $label-color;
        }

        .mat-form-field {
            flex: 2;
            display: flex;
        }
    }

    .mat-error {
        font-size: 12px;
    }
}