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

.combined-course {
  padding: var(--pix-spacing-12x) 80px;

  &__exit {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-bottom: var(--pix-spacing-2x);
  }

  &__description {
    @extend %pix-body-l;

    display: flex;
    align-items: center;
    margin-bottom: var(--pix-spacing-6x);
  }

  &__divider {
    margin: var(--pix-spacing-6x) 0;
    border-top: 1px solid var(--pix-neutral-100);
  }

  &__retry-text {
    @extend %pix-body-m;

    margin-bottom: var(--pix-spacing-6x);
    font-weight: var(--pix-font-bold);
    text-align: right;
  }

}

.combined-course-header {
    display: flex;
    gap: var(--pix-spacing-8x);
    justify-content: space-between;

    &__completed {
      display: flex;
      gap: var(--pix-spacing-4x);
      align-items: center;
      padding: var(--pix-spacing-6x);
      background: var(--pix-secondary-100);
      border: 1px solid var(--pix-secondary-500);
      border-radius: 16px;
      // stylelint-disable color-no-hex
      box-shadow: 2px 6px 0 1px #CF9430;

    .completed-text {
      display: flex;
      flex-direction: column;
      color: var(--pix-secondary-900);

      &__title {
        @extend %pix-title-s;

        margin-bottom: var(--pix-spacing-2x);
      }

      &__description {
        @extend %pix-body-m;
      }
    }
  }

    h1 {
      @extend %pix-title-m;
    }

    &__text {
      display:flex;
      flex-direction: column;
      gap: var(--pix-spacing-8x);
    }

    button {
    width: fit-content;
    }

    .survey-button {
      width: fit-content;
    }

    .pix-tooltip {
      width: fit-content;
    }
}

.combined-course-item {
  display: flex;
  gap: var(--pix-spacing-4x);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--pix-spacing-4x);
  padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
  background: rgb(var(--pix-primary-100-inline), 0.20);
  border: 1px solid var(--pix-primary-100);
  border-radius: var(--pix-spacing-4x);

  &--formation {
    background: color-mix(in srgb, var(--pix-primary-100) 20%, transparent);
  }

  &--yellow-border {
    border: 6px solid var(--pix-secondary-500);
  }

  &--white {
    background: var(--pix-neutral-0);
  }

  &__content {
    display: flex;
    gap: var(--pix-spacing-4x);
    align-items: center;
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__title {
    @extend %pix-title-xxs;
  }

  &__description {
    @extend %pix-body-s;

    display: inline-flex;
    gap: var(--pix-spacing-2x);
    align-items: center;
    color: var(--pix-neutral-500);
  }

  &__indicator {
    &--locked {
      display: flex;
      justify-content: center;
      min-width: var(--pix-spacing-8x);
      max-width: var(--pix-spacing-8x);

      svg {
        fill: var(--pix-primary-500);
      }
    }

    &--completed {
      @extend %pix-body-m;

      display: flex;
      gap: var(--pix-spacing-2x);
      align-items: center;
      color: var(--pix-primary-500);
      font-weight: var(--pix-font-bold);

      .combined-course-item__icon {
        width: var(--pix-spacing-8x);
        height: var(--pix-spacing-8x);

        &--yellow {
          color: var(--pix-secondary-500);
        }
      }
    }

     &--yellow {
      color: var(--pix-secondary-700);
    }
  }

   &--current {
      border: 6px solid var(--pix-primary-300);

      .combined-course-item__tag {
        display: flex;
        gap: var(--pix-spacing-1x);
        align-items: center;
        padding: 6px var(--pix-spacing-4x);
        background: var(--pix-tertiary-100);
        border-radius: 50px;
      }
   }


  &__duration {
    display: inline-flex;
    gap: var(--pix-spacing-1x);
    align-items:center;

    @extend %pix-body-s;

    &__icon {
      width: 16px;
      height: 16px;
    }
  }

  .combined-course-item__text {
    display: flex;
    flex-direction: column;
    gap: var(--pix-spacing-1x);
  }
}
