<mat-toolbar class="bottom-bar">
  <div class="disclaimer">
    <div class="medical-disclaimer">
      Medical Disclaimer: This resource is intended for research purposes only. It should not be used for emergencies or
      medical or professional advice.
    </div>

    HuBMAP data is managed and published in the Data Portal and HRA according to FAIR principles, including standardized
    processing with reproducible pipelines. HuBMAP data may also be processed by other methods in scientific results
    published by HuBMAP consortium collaborations.
  </div>
  <div class="contact-copyright">
    <a href="mailto:infoccf@indiana.edu" mat-stroked-button class="bottom-button">
      <mat-icon>mail_outline</mat-icon>
      Contact the HRA Team
    </a>
    <div class="copyright">
      <mat-icon>copyright</mat-icon>
      <p>2023 All Rights Reserved</p>
    </div>
  </div>
</mat-toolbar>

:host {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  background-color: #c2cae5;

  .bottom-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0rem 1.5rem;
    margin-left: 1px;
    min-width: 124px;
    color: #444c65;
    border-radius: 6.25rem;
    height: 40px;
    background-color: #f7f2fa;
    box-shadow:
      0px 1px 2px rgba(0, 0, 0, 0.3),
      0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    letter-spacing: 0;
  }

  .bottom-bar {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.063rem;
    padding: 0rem 1.5rem;
    background-color: #c2cae5;
    max-width: 77rem;
    position: relative;
    min-height: 5.563rem;
    padding: unset;
    height: unset;
    overflow: hidden;
  }

  .disclaimer {
    white-space: normal;
    text-align: center;
    margin: 4.5rem 0rem;

    .medical-disclaimer {
      margin-bottom: 2.5rem;
    }
  }

  .contact-copyright {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5rem;
  }

  ::ng-deep span > mat-icon {
    font-size: 1.313rem;
  }

  a:-webkit-any-link {
    text-decoration: unset !important;
  }

  .copyright {
    display: flex;
    align-items: center;

    mat-icon {
      padding-right: 2rem;
    }

    p {
      margin-bottom: unset;
    }
  }

  @media (max-width: 80rem) {
    .contact-copyright {
      padding: 0rem 1rem 5rem 1rem;
      margin: unset;
    }
  }

  @media (max-width: 40rem) {
    .contact-copyright {
      flex-direction: column;
      align-items: center;
    }

    .bottom-button {
      margin-right: unset;
      margin-bottom: 4.5rem;
    }
  }

  @media (max-width: 26.75rem) {
    .bottom-bar {
      justify-content: center;
    }

    .disclaimer {
      margin: 4.5rem 1rem;
    }
  }
}