.authorWraper {
  padding: var(--review-credits-outer-padding-mobile, 0);
  background-color: var(--review-credits-outer-background-color, var(--module-background-color, #fff));
  width: 100%;

  a {
    color: var(--review-credits-link-color, #165af8);
    text-decoration: var(--review-credits-link-text-decoration, underline);
  }

  > div {
    background: var(--review-credits-background-color, #f4f4f4);
    border-radius: var(--review-credits-border-radius, 0.8rem);
    border: var(--review-credits-border, none);
    padding: var(--review-credits-inner-padding-mobile, 0.8rem 1.6rem);
    max-width: var(--review-credits-max-width-mobile, var(--main-container-max));
    margin: 0 auto;

    @include min(tablet) {
      padding: var(--review-credits-inner-padding-tablet, 0.8rem 2.4rem);
      max-width: var(--review-credits-max-width-tablet, var(--main-container-max));
    }

    @include min(laptop) {
      max-width: var(--review-credits-max-width-laptop, var(--main-container-max));
    }
  
    > div {
      @include flex-direction(column);
      gap: 2.4rem;
  
      > button {
        @include flex-align(center, flex-start);
        display: flex !important;
        gap: 0.4rem;
        background: transparent;
        width: 100%;
        max-width: 100%;
        text-align: left;
        border: none;
        color: var(--review-credits-button-color, var(--review-credits-color, #64646d));
        font-size: var(--review-credits-button-font-size, var(--review-credits-font-size, 1.4rem)) !important;
        font-weight: var(--review-credits-button-font-weight, var(--review-credits-font-weight, 700));
        line-height: var(--review-credits-button-line-height, var(--review-credits-line-height, 2.2rem));
        padding: 0;
    
        &::after {
          left: auto !important;
          right: 0;
          border-color: var(--review-credits-button-color, var(--review-credits-color, #64646d)) !important;
        }

        svg {
          width: 2rem;
          height: 2rem;
          margin: 0;
          padding: 0;
          
          path {
            fill: var(--review-credits-button-color, var(--review-credits-color, #64646d));
          }
        }
      }
  
      &[class=""] {
        gap: 0;
      }
    }
  }

  @include min(tablet) {
    padding: var(--review-credits-outer-padding-tablet, 0);
  }
}

.editorial {
  @include flex-direction(row);
  @include flex-align(center, flex-start);
  gap: 0.4rem;
  color: var(--review-credits-editorial-color, var(--review-credits-color, #64646d));
  font-size: var(--review-credits-editorial-font-size, var(--review-credits-font-size, 1.4rem));
  font-weight: var(--review-credits-editorial-font-weight, var(--review-credits-font-weight, 700));
  line-height: var(--review-credits-editorial-line-height, var(--review-credits-line-height, 2.2rem));

  a,
  svg {
    color: var(--review-credits-editorial-link-color, var(--review-credits-link-color, #165af8));
  }
}

.reviewCredits {
  @include flex-direction(column);
  gap: 1.6rem;
}

.readtimeDate {
  @include flex-direction(row);
  @include flex-align(center, space-between);
  color: var(--review-credits-read-time-date-color, #515156);
  font-weight: var(--review-credits-read-time-date-font-weight, 500);
  font-size: var(--review-credits-read-time-date-font-size, 1.2rem);
  line-height: var(--review-credits-read-time-date-line-height, 1.8rem);
}

.people {
  @include flex-direction(column);
  gap: 0.8rem;
}

.authorCommon {
  @include flex-align(center, center);
  display: grid;
  grid-template-columns: 4.8rem 1fr;
  background: var(--review-credits-author-background-color, #ffffff);
  padding: 0.6rem 0.8rem 0.6rem 0.6rem;
  column-gap: 0.8rem;
  border-radius: var(--review-credits-author-border-radius, 1.2rem);
  border: var(--review-credits-author-border, var(--review-credits-border, none));
  text-decoration: none;

  > img {
    border-radius: 10rem;
    border: var(--review-credits-author-img-border, 1px solid #ececec);
  }

  > svg {
    grid-column: 3;
    fill: var(--review-credits-color, #64646d);
  }

  @include min(tablet) {
    padding-right: 1.6rem;
  }
}

.authorDataContainer {
  @include flex-direction(column);
  @include flex-align(flex-start, space-between);
  gap: 0.3rem;
  height: 100%;
}

.prefixCommon {
  font-size: var(--review-credits-author-prefix-font-size, var(--review-credits-font-size, 1.4rem));
  font-weight: var(--review-credits-author-prefix-font-weight, 400);
  line-height: var(--review-credits-author-prefix-line-height, var(--review-credits-line-height, 2.2rem));
  color: var(--review-credits-author-prefix-color, var(--review-credits-color, #64646d));
  grid-column: 2;
}

.authorName {
  margin: 0;
  font-size: var(--review-credits-author-font-size, var(--review-credits-font-size, 1.4rem));
  font-weight: var(--review-credits-author-font-weight, 700);
  line-height: var(--review-credits-author-line-height, var(--review-credits-line-height, 2.2rem));
  text-decoration: underline;
  color: #165af8;
}

.authorTitle {
  font-size: var(--review-credits-author-title-font-size, 0.9rem);
  font-weight: var(--review-credits-author-title-font-weight, 700);
  line-height: var(--review-credits-author-title-line-height, 1.2rem);
  letter-spacing: var(--review-credits-author-title-letter-spacing, 0.5px);
  text-align: center;
  padding: 0.4rem 0.8rem;
  gap: 1rem;
  border-radius: var(--review-credits-author-title-border-radius, 10rem);
  background: var(--review-credits-author-title-background-color, #6e33e5);
  color: var(--review-credits-author-title-color, #ffffff);
  text-transform: uppercase;
  grid-column: 2;
}

.reviewerTitle {
  @include flex-direction(row);
  gap: 0.4rem;
  color: var(--review-credits-color, #64646d);
  text-decoration: none;
  font-size: var(--review-credits-reviewer-title-font-size, var(--review-credits-font-size, 1.4rem));
  font-weight: var(--review-credits-reviewer-title-font-weight, 500);
  line-height: var(--review-credits-reviewer-title-line-height, var(--review-credits-line-height, 2.2rem));
}

.dateTimeWrapper {
  @include flex-align(center, flex-end);
  white-space: nowrap;
  gap: 0.5rem;
  flex: 1;

  a {
    pointer-events: none;
    text-decoration: none;
    color: var(--review-credits-read-time-date-color, #515156);
  }
}

.readingWithBorder {
  @include flex-align(center, center);
  gap: 0.4rem;
}

.readingTimeText {
  font-weight: 700;
}