@use '@angular/material' as mat;
@use '@observability/ui/styles/theme' as theme;
@use '@observability/ui/styles/mixins' as mixins;
@use '@observability/ui/styles/variables' as variables;

:host {
  @include mixins.flex-column($justify: flex-start);

  width: 100%;
  height: 100%;

  header {
    @include mixins.flex-row($justify: flex-start);

    width: 100%;
    padding: 20px 32px 0 16px;

    .logo {
      height: 30px;
      margin-right: auto;
    }

    a {
      @include mixins.link;
    }
  }

  .content {
    @include mixins.flex-column;

    width: 100%;
    height: 100%;

    .title {
      @include mixins.font-style($style: headline-4);

      text-align: center;
      margin-bottom: variables.$space-xxl;
      font-family: Merriweather,Times New Roman,serif;
    }

    mat-card {
      @include mixins.flex-column($justify: flex-start, $align: flex-start);

      width: 388px;
      padding: variables.$space-lg;
      border: variables.$border;
      border-radius: variables.$border-radius;

      mat-card-content {
        width: 100%;
      }

      mat-card-actions {
        @include mixins.flex-row($justify: flex-end);

        width: 100%;
        margin: unset;
        padding: unset;
        margin-top: auto;

        button {
          width: 100%;
          height: 40px;

          ::ng-deep .mat-button-wrapper {
            justify-content: center;
          }
        }
      }

      mat-card-footer {
        width: 100%;
        margin: unset;
        margin-top: variables.$space-md;
      }
    }
  }
}
