@import "@angular/material/prebuilt-themes/indigo-pink.css";
@import 'node_modules/include-media/dist/_include-media.scss';
@import "variables";

html, body {
  margin: 0;
  height: 100%;
}

h2 {
  margin-bottom: 0.5rem !important;
}

h3 {
  margin-bottom: 0.5rem !important;
}

mat-form-field, mat-checkbox {
  margin: $field-margin;
}

/* BEGIN: https://github.com/angular/components/issues/4580 */
//* use .mat-form-field-invalid since it is only set after field had focus */
mat-form-field:not(.no-error-on-field).ng-touched.mat-form-field-invalid {
  animation: bigger;
  animation-duration: 0.3s;
  margin-bottom: 60px;
}

@keyframes bigger {
  from {margin-bottom: 0;}
  to {margin-bottom: 60px;}
}
/* END: https://github.com/angular/components/issues/4580 */

button {
  height: 2.25rem;
  min-width: fit-content !important;
  bottom: 0.25rem;
  margin: 0 $field-margin !important;
}

.sae {
  &__contentPath {
    width: 15rem;
  }

  &__contentProtocol {
    width: 7rem;
  }

  &__factorToValue {
    width: 9rem;
  }

  &__fields {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
  }

  &__fields-with-button {
    display: flex;
    flex-flow: nowrap;
    align-items: baseline;
  }

  &__gpio {
    width: 8rem;
  }

  &__heading-extra-top-margin {
    margin-top: 1.25rem !important;
  }

  &__hostname {
    width: 10rem;
  }

  &__http-method {
    width: 8rem;
  }

  &__mandatory_fields_hint {
    margin: 1.5rem $field-margin;
  }

  &__modbus-address {
    width: 8rem;
  }

  &__modbus-name {
    width: 10rem;
  }

  &__modbus-register-type {
    width: 12rem;
  }

  &__mqttTopic {
    width: 18rem;
  }

  &__phases {
    width: 5rem;
  }

  &__pollInterval {
    width: 9rem;
  }

  &__port {
    width: 4rem;
  }

  &__regex {
    width: 12rem;
  }

  &__url {
    width: 35rem;

    @include media(">xs", "<=sm") {
      width: 28rem;
    }

    @include media("<=xs") {
      width: 20rem;
    }
  }

  &__value-name {
    width: 20rem;
  }

  &__voltage {
    width: 7rem;
  }
}
