tutorbookapp/tutorbook

@use 'styles/common';
@use 'styles/sizes';

.wrapper {
  @include common.wrapper;
  margin: 48px auto;
  display: flex;

  .left {
    flex: 0 0 auto;
    margin-right: 96px;

    .links {
      position: sticky;
      top: sizes.$header-height + 24px;

      > a {
        display: block;
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 16px;
        font-family: var(--font-sans);
        color: var(--accents-5);
        text-decoration: none;
        transition: color 0.2s ease-in-out;
        position: relative;
        cursor: pointer;

        &:hover {
          color: var(--on-background);
        }

        &:last-child {
          margin-bottom: 0;
        }

        &.active {
          color: var(--on-background);
          font-weight: 600;
        }
      }
    }
  }

  .right {
    flex: 1 1 auto;
    box-sizing: border-box;

    .card {
      border: 1px solid var(--accents-2);
      border-radius: 4px;
      position: relative;

      .divider {
        @include common.divider;
      }

      .inputs {
        max-width: 500px;
        margin: 32px auto;
        padding: 0 16px;

        @media (max-width: 600px) {
          margin: 0 auto;
          padding: 16px;
        }

        .field {
          @include common.field;

          .label {
            margin-right: 24px;
            padding: 0;

            p {
              margin: 4px 0;

              &:first-child {
                margin-top: 0;
              }

              &:last-child {
                margin-bottom: 0;
              }
            }

            .header,
            b {
              font-weight: 600;
            }
          }
        }

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

        .error {
          color: var(--error);
          font-weight: 450;
          margin-top: 16px;
        }
      }
    }
  }
}