tutorbookapp/tutorbook

@use 'sass:map';
@use 'styles/common';
@use 'styles/typography';

// TODO: Update styling for mobile usage (padding is much too large for smaller
// viewports; i.e. mobile devices).

.wrapper {
  max-height: calc(100vh - 32px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;

  .nav {
    @include typography.typography('headline6');
    padding: 24px 48px;
    border-bottom: 1px solid var(--accents-2);
    flex: none;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .form {
    height: 100%;
    overflow: auto;
    max-width: 450px;
    box-sizing: border-box;
    margin: 32px auto;
    padding: 0 48px;

    .body {
      @include typography.typography('body1');
      margin: 0;
    }

    .btn {
      margin: 24px 0 0;
      width: 100%;
    }

    .error {
      @include common.error;
    }
  }
}