/** @component panel */

@include exports('md-panel') {
  .#{$panel__class} {
    display: flex;
    width: 100vw;
    height: auto;
    padding: rem-calc(132) 2rem 2rem 2rem;
    text-align: center;
    background: $md-white-100;
    background: var(--mdl-background-primary, $md-white-100);
    flex-direction: column;
    align-items: center;

    @media #{$medium-up} {
      padding-top: rem-calc(188);
    }

    @media #{$v-small-only} {
      padding-top: 10vh;
    }

    @media #{$v-medium-only} {
      padding-top: 15vh;
    }

    &--full {
      position: absolute;
      top: 0;
      left: 0;
      z-index: $zindex-modal-background - 1;
      height: 0px; // IE fix
      min-height: 100vh;
    }

    &__main {
      display: flex;
      width: 100%;
      max-width: rem-calc(520);
      flex: 1 0 auto;
      flex-direction: column;
      align-items: center;
    }

    &__image {
      width: 100%;
      max-width: 190px;
      max-height: 80px;
      margin-bottom: rem-calc(48);
      font-size: rem-calc(80);
    }

    &__title,
    &__message {
      width: 100%;
      margin-bottom: 0;
      font-family: $brand-font-regular;
    }

    &__title {
      font-size: rem-calc(16);
      line-height: rem-calc(24);
      color: $md-black-100;
      color: var(--mdl-textColor-primary, $md-black-100);
    }

    &__message {
      font-size: rem-calc(14);
      line-height: rem-calc(22);
      color: $md-gray-70;
      color: var(--mdl-textColor-secondary, $md-gray-70);
    }

    &__secondary-action {
      margin-top: rem-calc(48);
      font-size: rem-calc(14);
      color: $md-gray-70;
      color: var(--mdl-textColor-secondary, $md-gray-70);
    }

    &__spinner {
      @extend %md-spinner;
      @extend %md-spinner--36;

      margin-top: rem-calc(40) !important;
    }

    &__footer {
      display: flex;
      width: 100%;
      margin-top: rem-calc(64);
      font-size: rem-calc(10);
      color: $md-gray-50;
      color: var(--mdl-textColor-secondary, $md-gray-50);
      flex-direction: column;
      align-items: center;
      justify-content: center;

      @media #{$medium-up} {
        flex-direction: row;
      }

      .footer__logo {
        display: flex;
        width: 100%;
        height: 100%;
        max-height: rem-calc(28);
        margin-bottom: rem-calc(14);
        font-size: rem-calc(28);
        justify-content: center;

        @media #{$medium-up} {
          width: auto;
          margin-bottom: 0;
        }
      }

      .footer__copyright {
        text-align: center;
        align-self: stretch;

        @media #{$medium-up} {
          margin-left: rem-calc(20);
        }
      }

      a {
        color: $md-gray-50;
        color: var(--mdl-textColor-hyperlink-color, $md-gray-50);

        &:hover {
          color: $anchor-font-color-hover;
          color: var(--mdl-textColor-hyperlink-hover, $anchor-font-color-hover);
        }
      }
    }

    &__cta {
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    &__cta .#{$button__class},
    .#{$input__class} {
      height: $panel-input__height;

      @media #{$small-only} {
        width: 100%;
        max-width: rem-calc(320);
      }
    }

    .#{$input__class} {
      width: 100%;
      height: $panel-input__height;
      max-width: rem-calc(320);

      &-container {
        margin: 0 auto;

        @media #{$small-only} {
          width: 100%;
          max-width: rem-calc(320);
        }
      }
    }

    .#{$input__class} {
      border-radius: rem-calc(8);
    }

    &--message {
      .#{$panel__class} {
        &__cta {
          margin-top: rem-calc(24);

          @media #{$small-only} {
            width: 100%;
          }

          @media #{$medium-up} {
            .#{$button__class} {
              padding-right: rem-calc(64);
              padding-left: rem-calc(64);
            }
          }
        }
      }
    }

    &--form {
      .#{$panel__class} {
        &__title {
          &.ellipsis {
            @media #{$small-only} {
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

        &__message {
          color: $md-gray-70;
          color: var(--mdl-textColor-secondary, $md-gray-70);
        }

        &__form {
          margin-top: rem-calc(12);
          margin-bottom: 0;

          @media #{$small-only} {
            width: 100%;
          }
        }

        &__cta {
          .#{$checkbox__class} {
            margin-top: rem-calc(8);
            font-family: $brand-font-regular;
            color: $md-gray-70;
            color: var(--mdl-textColor-secondary, $md-gray-70);
          }
        }

        &__password-link {
          display: flex;
          margin-top: rem-calc(8);
          font-size: rem-calc(14);
          align-items: center;
          flex-direction: column;
        }

        &__secondary-action {
          margin-top: rem-calc(78);
        }
      }

      .#{$input__class}__icon-container {
        .#{$input__class} {
          padding-right: rem-calc(36);
        }

        .#{$input__class}__icon,
        .#{$button__class}--icon {
          min-height: 0;
          padding: 0;
          background: transparent;
          border: 0;
        }
      }

      .#{$button__class},
      .#{$input__class} {
        min-height: $panel-input__height;
        padding-right: rem-calc(20);
        padding-left: rem-calc(20);
        margin-bottom: rem-calc(8);

        @media #{$medium-up} {
          width: rem-calc(320);

          &.#{$button__class}--icon {
            width: auto;
          }
        }
      }

      .#{$input__class} {
        &--with-icon {
          padding-right: rem-calc(36);
        }

        &-container {
          margin-bottom: 0;
          align-items: center;

          .#{$input__class}__messages {
            margin-top: 0;
            margin-bottom: rem-calc(8);
            line-height: rem-calc(24);
          }

          .#{$input__class}__icon--right {
            position: absolute;
            top: rem-calc(11);
            right: rem-calc(11);
            display: flex;
            font-size: rem-calc(18);
            color: $md-gray-50;
            color: var(--mdl-textColor-secondary, $md-gray-50);
            cursor: pointer;
          }
        }

        &:focus + .#{$input__class}__icon--right {
          position: absolute;
          display: block;
          cursor: pointer;
        }

        &__messages.error {
          padding: 0;
          margin: 0;

          .message {
            margin-bottom: rem-calc(12);
            margin-left: 0;
            font-size: rem-calc(14);
            line-height: rem-calc(24);
            color: $input__message__font-color--error;
            color: var(--mdl-input-outline-error, $input__message__font-color--error);
          }
        }
      }
    }
  }
}