@import 'src/assets/styles/responsive-base.scss';

:host {
  display: flex;
  height: 100%;

  .success-text {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    mat-icon {
      flex-shrink: 0;
    }
  }

  mat-checkbox {
    --mdc-typography-body2-font-size: 13px;
  }

  .action-button {
    padding: 23px 45px;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .flex-center {
    display: flex;
    align-items: center;
  }

  .strength-input {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  h1 {
    font-size: 20px;
  }

  > div {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    flex-direction: column;
    #logo {
      max-width: 200px;
      align-self: center;
      margin-bottom: 20%;
      margin-top: 20%;
      @include screen('phone') {
        margin-bottom: 10%;
        margin-top: 0;
      }
    }
    .action-button {
      align-self: center;
    }
    .form-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    @include screen('phone') {
      align-items: center;

      > div {
        top: 0;
      }
    }
    .nav-buttons {
      display: flex;
      margin-top: 80px;
      justify-content: space-between;
      @include screen('phone') {
        margin-top: 20px;
      }
    }
    > div {
      position: absolute;
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 400px;
      width: 100%;

      @include screen('phone') {
        padding: 20px;
        box-sizing: border-box;
      }
    }
  }
}
