@import "../../src/scss/variables.scss";
@import "../../src/scss/mixins.scss";

.component-passwordRecovery {
  padding: 10px 0 40px 0;
  min-height: 100vh;

  .message {
    color: $white;
    background: $brown;
    padding: 10px;
    margin-bottom: 20px;
    @include font-style($font-sans, 'regular', $font-12);
    animation: blinker 2s linear 1;
  }

  .content {

    .title {
      display: block;
      @include font-style($font-serif, 400, $font-32);
      color: $black;
      height: 50px;
    }

    .subtitle {
      display: block;
      @include font-style($font-sans, 700, $font-16);
      color: $gray;
      height: 40px;
    }

    .label {
      display: block;
      @include font-style($font-sans, 700, $font-16);
      color: $gray;
      padding: 15px 0 5px 0;
    }

    .errors {
      display: block;
      @include font-style($font-sans, 700, $font-16);
      color: $red;
      padding: 15px 0 5px 0;
    }

    .input {
      max-width: 400px;
      &.error {
        border: 1px solid $red;
      }
    }

    .submit {
      @include font-style($font-serif, 700, $font-16);
    }
  }
}