// @import  '../colors/settings';
// @import  '../typography/settings';
// @import  '../tools/mixins/spacing';

@include exports('ng-login') {
  .messagebox-backdrop.login-box {
    .message-box {
      min-height: vr-adjust(560);
      padding-top: rem-calc(60);
      padding-right: rem-calc(24);
      padding-left: rem-calc(24);

      &__app-name,
      &__title {
        padding: 0 1rem;
        margin-bottom: rem-calc(40);
        font-size: rem-calc(20);
        line-height: rem-calc(24);
        letter-spacing: 1px;
        color: $md-gray-40;

        @media #{$small-only} {
          font-size: rem-calc(26);
        }
      }

      &__logo {
        height: rem-calc(96);
        margin-bottom: 0.5rem;
      }

      &__footer {
        margin-top: 0;
      }
    }

    .md-input-container {
      margin-bottom: 0.75rem;
    }

    .md-input {
      height: 3rem;
      font-family: $brand-font-extra-light;
      font-size: 1rem;
      text-align: center;
      background-color: transparent;
      border-bottom: 1px solid $md-gray-30;
      border-color: transparent;
      border-radius: 0;

      &:focus,
      &.focus {
        border-bottom-color: $md-theme-50;
      }
    }

    input[readonly],
    input.readonly {
      background-color: transparent;
      border-color: transparent;
    }

    .md-input__messages {
      text-align: left;
    }

    form,
    .md-form {
      padding-top: 1rem;
      margin-bottom: 0;
    }

    .validation-messages {
      .md-input__messages {
        padding-top: 0;
      }
    }

    .password-link {
      display: block;
    }

    .login-spinner {
      margin-top: 20%;
      font-size: 1.5rem;

      .icon-spinner {
        position: relative;
      }
    }

    &.loading {
      form,
      button,
      .message-box__login-title,
      .message-box__footer {
        display: none;
      }
    }
  }
}