tutorbookapp/tutorbook

@use 'styles/sizes';
@use 'styles/common';
@use 'styles/loader';
@use 'styles/socials';
@use 'styles/typography';

@include common.card-styles;

.card {
  padding: 16px;
  margin-bottom: 24px;
  min-width: 245px;
  width: 100%;

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

  a {
    display: block;
    margin-top: 16px;
    text-decoration: none;

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

  .btn {
    width: 100%;
  }
}

.content {
  @include common.wrapper(sizes.$form-width-with-margin);
  padding: 48px 24px;
  display: flex;

  @media (max-width: 700px) {
    flex-direction: column;
    padding: 24px;

    .left {
      margin-right: 0;
      margin-bottom: 24px;
    }
  }

  .left {
    flex: 1 1 auto;
    margin-right: 24px;

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

      .img {
        display: block;
        width: 120px;
        height: 120px;
        margin-right: 16px;
      }

      .name {
        @include typography.typography('headline4');
        color: var(--on-background);
        line-height: 2.2rem;
        margin: 0 0 8px;
      }

      .socials {
        height: 28px;
        display: flex;
        flex-wrap: wrap;
      }

      @include socials.core-styles;
    }

    h2 {
      @include typography.typography('headline6');
      color: var(--on-background);
      font-weight: 600;
      margin: 24px 0 0;
    }

    p {
      @include typography.typography('body1');
      color: var(--accents-5);
      white-space: pre-wrap;
      margin: 0 0 8px;
    }
  }

  .right {
    flex: 0 1 0%;

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

.background {
  height: 45vh;
  max-height: 400px;
  margin-top: -1 * sizes.$header-height;
  background: var(--accents-2);
  position: relative;
  font-size: 0;

  img {
    @include typography.typography('subtitle1');
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.loading {
  .background {
    @include loader.loading;
  }

  .name,
  .socials,
  h2,
  p {
    @include loader.loading;
    border-radius: 4px;
  }

  .name {
    height: 2.2rem;
    width: 200px;
  }

  .socials {
    width: 200px;
  }

  h2 {
    height: 32px;
    margin-bottom: 8px !important;
  }

  p {
    height: 100px;
  }
}