@use "sass:color";

.course-loading {
  @include loading-text;
  @include loading-shimmer;

  .header {
    @include course-header;
  }
  .overview {
    @include course-overview;

    .title {
      @include loading-text;
    }
  }
}

.course-sessions.course-sessions-loading {
  border-bottom: 0;
  @include loading-shimmer;
  
  .course-sessions-header {
    height: 2rem;
    @include for-phone-only {
      height: 3rem;
    }
  }

  .title {
    @include loading-text;
  }

  .sessions-grid-header {
    @include loading-text;
    background-color: color.adjust($davysGrey, $lightness: 50%);
    height: 2rem;
  }
}

.course-loading, .course-loader {
  @include main-section;
  
  .mock-detail-box {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    width: 100%;

    span {
      background-color: color.adjust($davysGrey, $lightness: 50%);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      padding: .25rem 4rem;
      color: color.adjust($davysGrey, $lightness: 50%);

      .expand-collapse-icon {
        margin-left: .5rem;
      }
    }
  }
}

@use "sass:color";

.course-loading {
  @include loading-text;
  @include loading-shimmer;

  .header {
    @include course-header;
  }
  .overview {
    @include course-overview;

    .title {
      @include loading-text;
    }
  }
}

.course-sessions.course-sessions-loading {
  border-bottom: 0;
  @include loading-shimmer;
  
  .course-sessions-header {
    height: 2rem;
    @include for-phone-only {
      height: 3rem;
    }
  }

  .title {
    @include loading-text;
  }

  .sessions-grid-header {
    @include loading-text;
    background-color: color.adjust($davysGrey, $lightness: 50%);
    height: 2rem;
  }
}

.course-loading, .course-loader {
  @include main-section;
  
  .mock-detail-box {
    display: flex;
    justify-content: center;
    width: 100%;

    span {
      background-color: color.adjust($davysGrey, $lightness: 50%);
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      padding: .25rem 4rem;
      color: color.adjust($davysGrey, $lightness: 50%);

      .expand-collapse-icon {
        margin-left: .5rem;
      }
    }
  }
}

Remove unneeded margin from loading box
Remove unneeded margin from loading box

With the new margins on the finished course this mock margin isn't
needed anymore and causes a jump.
