@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';

/** Header */
.scorecard-details-header__back-button {
  display: inline-flex;
}

/** Competence */
.scorecard-details__competence {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pix-spacing-6x);
  margin-top: var(--pix-spacing-8x);
}

.scorecard-details-competence__details {
  flex: 2;
  flex-basis: 500px;
}

.scorecard-details-competence-details__name {
  @extend %pix-title-m;
}

.scorecard-details-competence-details__description {
  @extend %pix-body-m;

  margin-top: var(--pix-spacing-3x);
  color: var(--pix-neutral-500);
  text-wrap: pretty;
}

.scorecard-details-content__score {
  @extend %pix-body-m;

  flex: 1;
}

.scorecard-details-content-score__score-container {
  display: flex;
  gap: var(--pix-spacing-12x);
  align-items: center;
  justify-content: center;
  margin-bottom: var(--pix-spacing-4x);
  padding-inline: var(--pix-spacing-10x);

  .pix-earned {
    text-align: center;
  }
}

.scorecard-details-content-score__level-info {
  font-weight: var(--pix-font-bold);
  text-align: center;
  text-transform: uppercase;
}

.scorecard-details__resume-button,
.scorecard-details__reset-button,
.scorecard-details__improve-button,
.scorecard-details__start-button {
  width: 16rem;
  margin: var(--pix-spacing-2x) auto;
}

.scorecard-details__improvement-countdown,
.scorecard-details-content-score__reset-message,
.scorecard-details__improving-text {
  @extend %pix-body-s;

  text-align: center;
}

.scorecard-details-content-score__reset-message {
  color: var(--pix-neutral-500);
}

/** Reset modal **/
.scorecard-details-reset-modal__footer {
  display: flex;
  gap: var(--pix-spacing-2x);
  justify-content: flex-end;
}

/** Tutorials */
.scorecard-details__tutorials {
  margin-top: var(--pix-spacing-8x);
  padding-top: var(--pix-spacing-8x);
  border-top: 1px solid var(--pix-primary-100);
}

.scorecard-details-tutorials__header {
  padding-bottom: var(--pix-spacing-8x);
}

.scorecard-details-tutorials-header__title {
  @extend %pix-title-s;
}

.scorecard-details-tutorials-header__description {
  @extend %pix-body-s;

  margin-top: var(--pix-spacing-2x);
  color: var(--pix-neutral-500);
}

.scorecard-details-tutorials__list {
  .tube:not(:first-child) {
    margin-top: var(--pix-spacing-8x);
  }

  .tube__title {
     @extend %pix-title-xs;

    color: var(--pix-neutral-500);
  }

  .tube__content li {
    margin-block: var(--pix-spacing-4x);
  }
}
