//@import "node_modules/@aarhus-university/au-designsystem-delphinus/source/atoms/functions/_string-replace";

.timeline {
  $timeline-breakpoint: 'wide';
  $timeline-padding-vertical: -1;
  $timeline-padding-vertical-wide: -3;
  $timeline-padding-horizontal: $page-padding-side;
  $timeline-padding-details: 0;
  $timeline-padding-details-course: -2;
  $timeline-padding-course-vertical: -3;
  $timeline-padding-course-horizontal: -2;
  $timeline-missing-exams-bottom-spacing: -3;
  $timeline-elective-width: 1.5rem;
  $timeline-spacing-between-courses: -3;
  $timeline-lines-in-course: 3;
  $timeline-header-colum-width: 18rem;
  $timeline-badge-size-without-padding: "#{line-height("single", $include-calc: false)}";
  $timeline-badge-padding: -5;
  $timeline-badge-padding-wide: -4;
  $timeline-size-dot: 0;


  display: grid;
  align-content: start;
  width: 100vw;
  flex: 0 0 auto;
  margin: 0;
  @include breakpoint($timeline-breakpoint) {
    grid-template-columns: $timeline-header-colum-width 1fr;
  }

  @include breakpoint("max-width") {
    width: $page-max-width;
  }

  &__header {
    display: flex;
    position: relative;
    @include set-colors('background-secondary');

    &::before,
    &::after {
      content: "";
      position: absolute;
      left: spacing($timeline-size-dot, $times: .5, $add: spacing($timeline-padding-horizontal), $subtract: math.div($width-border, 2));
      border-left: $width-border dotted color("foreground");
    }

    &::before {
      top: 0;
      bottom: 50%;
      @include breakpoint($timeline-breakpoint) {
        bottom: spacing($timeline-padding-vertical-wide, $times: -1, $add: 100%);
      }
    }

    &::after {
      bottom: 0;
      top: 50%;
      @include breakpoint($timeline-breakpoint) {
        top: spacing($timeline-padding-vertical-wide, $add: #{spacing($timeline-padding-horizontal)});
      }
    }

    &:last-of-type {
      &::after {
        content: none;
      }
    }

    & + .timeline__courses {

      &::before {
        content: "";
        position: absolute;
        left: spacing($timeline-size-dot, $times: .5, $add: spacing($timeline-padding-horizontal), $subtract: math.div($width-border, 2));
        border-left: $width-border dotted color("background");
        top: 0;
        bottom: 0;
      }

      &:last-of-type {
        &::before {
          content: none;
        }
      }

      @include breakpoint($timeline-breakpoint) {
        &::before {
          content: none;
        }
      }
    }

    @include breakpoint($timeline-breakpoint) {
      border-bottom: $width-border solid color('border');
      &:last-of-type {
        border-bottom: none;
      }
    }

    &__wrapper {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;

      background-size: $nav-width-active-style 100%;
      background-position: right top;
      background-repeat: no-repeat;

      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: -2*$outline-offset;
      }
    }

    &:active {
      &:not(.timeline__header--active) button {
        background-image: linear-gradient(color("border-theme"), color("border-theme"));
      }
    }

    &__content {
      display: flex;
      width: 100%;
      align-items: center;
      @include content-container;

      text-align: left;

      padding: spacing($timeline-padding-vertical) spacing($timeline-padding-horizontal) spacing($timeline-padding-vertical) spacing($timeline-padding-horizontal);

      @include breakpoint($timeline-breakpoint) {
        padding-top: spacing($timeline-padding-vertical-wide);
        padding-right: spacing(-1);
        padding-bottom: spacing($timeline-padding-vertical-wide);
      }

      @include icon-style {
        content: '';
        z-index: $z-index-just-above-static;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        line-height: 1;
        width: spacing($timeline-size-dot);
        height: spacing($timeline-size-dot);
        border-radius: 50%;
        border: $width-border dotted color('foreground');
        background-color: color("background-secondary");
        color: color('utility-foreground');
        justify-content: center;
        margin-right: spacing(-3);
      }
      
      h2 {
        margin: 0;
        color: color("foreground");

        @include breakpoint($timeline-breakpoint) {
          font-size: font-size(0);
        }
      }

    }

    &__time {
      display: block;
      color: color('foreground');
      @include set-font(-1, 'single');
    }


    &--passed {
      &::before,
      &::after {
        border-left-style: solid;
      }

      &::before {
        top: $width-border * -1;
      }

      & + .timeline__courses {
        &::before {
          border-left-style: solid;
        }
      }

      & .timeline__header__content::before {
        @include set-icon("confirm");
        border-style: solid;
        background-color: color('utility-confirm');
      }
    }

    &--failed {
      &::before,
      &::after {
        border-left-style: solid;
      }

      &::before {
        top: $width-border * -1;
      }

      & + .timeline__courses {
        &::before {
          border-left-style: solid;
        }
      }

      & .timeline__header__content::before {
        @include set-icon("failed");
        border-style: solid;
        background-color: color('utility-warning');
      }
    }

    &--current {
      &::after {
        border-left-style: solid;
      }

      & + .timeline__courses {
        &::before {
          border-left-style: solid;
        }
      }

      & .timeline__header__content::before {
        @include set-icon("current-semester");
        border-style: solid;
        color: color('foreground');
      }
    }

    &--active {
      button {
        background-image: linear-gradient(color("border-theme"), color("border-theme"));
      }
    }

    .timeline-top & {
      background-color: color("background");
      border: none;

      &::before {
        top: 0;
        bottom: 0;
        border-color: color("border");
      }

      &::after {
        content: none;
      }

      .timeline__header__content {
        padding-top: 0;
        padding-right: 0;
        align-items: flex-start;

        &::before {
          border-color: color("border");
          background-color: color("background");
        }

        &::after {
          content: none;
        }
      }

      &--passed {
        &::before {
          border-color: color("foreground");
        }

        .timeline__header__content {
          &::before {
            @include set-colors("utility-confirm-background");
            border-color: color("foreground");
          }
        }

      }
    }
  }

  &__courses {
    position: relative;
    padding: spacing($timeline-spacing-between-courses) spacing($timeline-padding-horizontal) spacing($timeline-padding-vertical) spacing($timeline-padding-horizontal, $add: '#{spacing($timeline-size-dot)} + #{spacing(-3)}');
    margin-left: 0;
    @include content-container;
    @include set-colors('background-secondary');

    &--empty {
      @include set-font(1, "single", $weight: "light");
      color: color("foreground-secondary");
      text-align: center;
      padding-top: spacing($timeline-padding-vertical);

      @include breakpoint($timeline-breakpoint) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 7rem;

        & > * {
          padding: 0 spacing(0);
        }
      }
    }

    @include breakpoint($timeline-breakpoint) {
      padding: spacing($timeline-padding-vertical-wide) spacing($timeline-padding-horizontal, $subtract: spacing($timeline-spacing-between-courses, $times: .5)) spacing($timeline-padding-vertical-wide) spacing($timeline-padding-horizontal);
      border-bottom: $width-border solid color('background');
      &:last-of-type:not(.timeline__courses--missing-exams) {
        border-bottom: none;
      }
    }

    &--missing-exams {
      border-top: $width-border solid color("border-theme");
      display: none;

      &::before {
        content: "";
        display: block;
        position: absolute;
        background-color: color("background-secondary");
        width: spacing(0, $add: '#{font-size(1)} + #{spacing(-3)}');
        top: $width-border * -1;
        bottom: $width-border * -1; //also has a litte overflow, to prevent Chrome rendering issue
        left: 0;

        @include breakpoint($timeline-breakpoint) {
          width: $timeline-header-colum-width;
          background-color: color("background");
        }
      }

      &::after {
        content: "";
        position: absolute;
        left: spacing($timeline-size-dot, $times: .5, $add: spacing($timeline-padding-horizontal), $subtract: math.div($width-border, 2));
        border-left: $width-border dotted color("background");
        top: 0;
        bottom: 0;

        @include breakpoint($timeline-breakpoint){
          border-color: color("border");
          bottom: spacing($timeline-missing-exams-bottom-spacing, $times: -1);
        }
      }


      @include breakpoint($timeline-breakpoint) {
        border-bottom: spacing($timeline-missing-exams-bottom-spacing) solid color("background");
        padding-left: spacing($timeline-padding-horizontal, $add: $timeline-header-colum-width);
      }
    }

    &__list {
      @include breakpoint($timeline-breakpoint) {
        display: flex;
        flex-wrap: wrap;
        max-width: none;
      }
    }
  }

  &__course {

    //overwrite default ul style
    padding: 0;
    margin: 0;
    &::before {
      content: none;
    }
    display: flex;

    @include breakpoint($timeline-breakpoint) {
      border: spacing($timeline-spacing-between-courses, $times: .5) solid color('background-secondary');
      flex-grow: 0;
      flex-shrink: 0;

      $ects-max: 30;
      @for $i from 1 through $ects-max {
        &--#{$i} {
          width: (math.div(100%, $ects-max)) * $i;
        }
      }
    }

    &__button {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      text-align: left;
      overflow-x: hidden;
      background-color: color('background');
      padding: spacing($timeline-padding-course-vertical) spacing($timeline-padding-course-horizontal);
      margin-bottom: spacing($timeline-spacing-between-courses);
      width: 100%;

      &:hover {
        background-color: color("background-hover");
      }
      &:active {
        background-color: color("background");
      }
      
      @include breakpoint($timeline-breakpoint) {
        margin: 0;
      }
      &--passed {
          @include set-colors("utility-confirm-background");
          padding-left: spacing(-3, $add: $width-border-utility);

          & .timeline__course__ects {
            color: color("utility-confirm-foreground-secondary");
          }

          &::before {
            position: absolute;
            top: 0;
            left: 0%;
            width: $width-border-utility;
            background-color: color("utility-confirm");
            content: '';
            height: 100%;
            border-radius: 0;
          }
          &:hover {
            background-color: color("utility-confirm-background-hover");
            &::before{
              background-color: color("utility-confirm-hover");
            }
          }
          &:active {
            background-color: color("utility-confirm-background");
            &::before{
              background-color: color("utility-confirm");
            }
          }
      }
  
      &--elective {
        position: relative;
        padding-right: spacing(-5, $add: $timeline-elective-width);

        &:hover {
          &::before,
          &::after {
            background-color: color("background-hover");
          }
        }
        &:active {
          &::before,
          &::after {
            background-color: color("background");
          }
        }

        &::before,
        &::after {
          @include set-font(-1, "single");
          position: absolute;
          border-radius: 0;
          width: $timeline-elective-width;
          color: color("foreground-secondary");
          height: 100%;
          background-color: color("background");
          border-left: $width-border solid color("background-secondary");
          left: auto;
          top: 0;
          right: 0;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          padding-bottom: spacing($timeline-padding-course-vertical, $add: spacing($timeline-badge-padding), $subtract: $width-border);
  
          @include breakpoint($timeline-breakpoint) {
            padding-bottom: spacing($timeline-padding-course-vertical, $add: spacing($timeline-badge-padding), $subtract: $width-border);
          }
        }
  
        &::before {
          content: attr(data-label-elective);
        }
  
        &--more {
          padding-right: spacing(-5, $add: $timeline-elective-width * 2);
  
          &::before {
            right: $timeline-elective-width;
          }
  
          &::after {
            content: attr(data-label-elective-more);
          }
        }
      }
      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }
    }  

    &__title {
      flex: 1 0 100%;
      @include set-font(0, "single");

      @include breakpoint($timeline-breakpoint) {
        min-height: calc((#{line-height("single", $include-calc: false)}) * #{$timeline-lines-in-course});
        margin-bottom: 0;
      }
    }

    &__sub-title {
      @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
      margin: spacing(-2) 0 spacing(-5) 0;
    }

    &__elective-list {
      margin: 0;
    }

    &__type {
      @include set-font(-1, "single", $transform: "uppercase");
      margin-bottom: spacing(-5);
    }

    &__ects {
      display: block;
      color: color('foreground-secondary');
      @include set-font(-1, 'single');
      flex-grow: 1;
      align-self: flex-end;
      white-space: nowrap;
    }

    &__badges {
      align-self: flex-end;
      /* display: inline-flex; */
      margin-left: $width-border * -1;

      &__description {
        text-align: left;
        align-self: center;
        @include set-font(0, "single");
        margin-left: spacing(-4, $subtract: $width-border);
      }
    }

    &__badge {
      position: relative;
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      @include set-font(-1, "single");
      width: spacing($timeline-badge-padding, $times: 2, $add: $timeline-badge-size-without-padding);
      height: spacing($timeline-badge-padding, $times: 2, $add: $timeline-badge-size-without-padding);;
      overflow: hidden;
      white-space: nowrap;
      background-color: color('background-secondary');
      border: $width-border solid color('background');
      border-radius: 50%;

      margin-right: $width-border * -1;
      margin-bottom: $width-border * -1;

      @include breakpoint($timeline-breakpoint) {
        width: spacing($timeline-badge-padding-wide, $times: 2, $add: $timeline-badge-size-without-padding);;
        height: spacing($timeline-badge-padding-wide, $times: 2, $add: $timeline-badge-size-without-padding);;
      }

      & + & {
        margin-left: $width-border * -2;
      }

      &::before {
        content: attr(data-label);
        text-align: center;
        flex: 1 0 100%;
      }

      &--failed {
        @include set-colors("utility-warning");

        @include icon-style {
          @include set-icon("failed");
        }
      }

      &--unconfirmed-enrollment {
        background-color: color("background");
        color: color("foreground-secondary");

        &::after {
          content: "";
          position: absolute;
          display: block;
          top: 0;
          bottom: 0;
          left: 0;
          width: spacing($timeline-badge-padding, $times: 2, $add: $timeline-badge-size-without-padding, $subtract: $width-border * 2);
          border-radius: 50%;
          background-color: transparent;
          border: $width-border solid color("background-secondary");

          @include breakpoint($timeline-breakpoint) {
            width: spacing($timeline-badge-padding-wide, $times: 2, $add: $timeline-badge-size-without-padding, $subtract: $width-border * 2);
          }
        }
      }

      &--passed {
        @include set-colors("background");
        border-color: color("utility-confirm-background");

        @include icon-style {
          @include set-icon("confirm");
        }
      }
    }
  }

  &-top {
    display: grid;
    align-items: end;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto spacing(-1) auto auto;
    grid-template-areas:
      "progress progress"
      "spacing spacing"
      "header toggle"
      "courses courses"
    ;
    grid-column-gap: spacing(-1);

    @include breakpoint($timeline-breakpoint) {
      grid-template-columns: $timeline-header-colum-width 1fr auto;
      grid-template-rows: auto auto;
      grid-template-areas:
        "header progress toggle"
        "courses courses courses"
      ;
      grid-gap: 0;
    }

    .timeline__header {
      grid-area: header;
      padding-right: 0;
    }

    .timeline__courses {
      grid-area: courses;
    }

    &--show-missing-exams {
      .timeline__courses {
        display: block;
      }
    }

    &__exam-toggle {
      grid-area: toggle;
      margin-right: spacing(0);

      @include breakpoint($timeline-breakpoint) {
        margin-right: spacing(0);
        margin-left: spacing(-1, $subtract: spacing(0));
      }

      &__button {
        display: flex;
        align-items: center;
        padding-bottom: spacing($timeline-padding-vertical);
        text-align: left;
        justify-self: end;

        background-size: 100% $nav-width-active-style;
        background-position: center bottom;
        background-repeat: no-repeat;

        @include breakpoint($timeline-breakpoint) {
          padding: spacing(-3) 0;
        }

        &:hover {
          color: color("foreground-hover");
          outline: none;

          &:not(.timeline-top__exam-toggle__button--active) {
            background-image: linear-gradient(color("border"), color("border"));
          }

          & .timeline-top__exam-toggle__badge {
            background-color: color("utility-warning-hover");
          }
        }

        &:active {
          color: color("foreground-theme");
          outline: none;

          &:not(.timeline-top__exam-toggle__button--active) {
            background-image: linear-gradient(color("border-theme"), color("border-theme"));
          }

          & .timeline-top__exam-toggle__badge {
            background-color: color("utility-warning");
          }   
        }

        &:focus-visible {
          outline: $outline-width solid color("utility-focus");
          outline-offset: -2*$outline-offset;
        }

        @include icon-style {
          @include set-icon("expand");
          margin-right: spacing(-4);
          font-weight: $font-weight-light;
        }

        &--active {
          background-image: linear-gradient(color("border-theme"), color("border-theme"));

          @include set-icon("collapse", $include-pseudo: "before");
        }
      }

      &__label {
        margin-right: spacing(-5);
      }

      &__badge {
        @include set-font(-1, "single");
        @include set-colors("utility-warning");
        padding: spacing(-5);
        border-radius: 50%;
        width: spacing(-5, $times: 2, $add: line-height("single", $include-calc: false));
        text-align: center;
        flex-shrink: 0;
      }
    }

    &__deadline {
      @include set-font(-1, "single");
      color: color("foreground-secondary");

      @include breakpoint($timeline-breakpoint) {
        display: flex;
        flex-direction: column;
      }

      & + & {
        margin-top: spacing(-5);
      }
    }

    &__label {
      @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    }

    &__progress {
      grid-area: progress;
      padding: 0 spacing($page-padding-side);

      @include breakpoint($timeline-breakpoint) {
        padding: 0;
        margin-right: spacing(0);
        border-bottom: $width-border solid color("background");
      }
    }
  }

  &-container {
    position: relative;
    display: flex;
    width: 100vw;
    overflow-x: hidden;

    @include breakpoint("max-width") {
      width: 100%;
    }
  }

  &-details {
    visibility: hidden;
    flex: 0 0 auto;
    width: 100%;
    background-color: color('background-secondary');
    padding: spacing($timeline-padding-details) spacing($timeline-padding-details) spacing(2, $times: 2) spacing($timeline-padding-details); //allow extra space for toolbar at bottom i Safari iOS

    z-index: $z-index-modal-view;
    position: fixed;
    top: 0;
    height: 0;
    overflow-y: hidden;

    @include breakpoint($timeline-breakpoint) {
      position: static;
      transform: translateX(0);
      transition: transform 1s ease-in-out;
      width: calc(100vw - #{$timeline-header-colum-width});
      margin-left: $timeline-header-colum-width;
      padding: spacing($timeline-padding-details);
      border-left: $width-border solid color("border-theme");
    }

    @include breakpoint("max-width") {
      width: $page-max-width - $timeline-header-colum-width;
    }

    & ul.grid {
      max-width: none;
      margin: 0;

      & > li {
        margin: 0;
      }
    }

    &--visible {
      visibility: visible;
      height: 100vh;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;

      @include breakpoint($timeline-breakpoint){
        transform: translateX(-100vw);
        height: auto;
        overflow-y: visible;
      }
      @include breakpoint("max-width"){
        transform: translateX($page-max-width * -1);
      }

    }

    &--move {
      height: 100vh;
      visibility: visible;

      @include breakpoint($timeline-breakpoint){
        height: auto;
      }
    }
  }
  &__modal__list {
        //overwrite default ul style
        margin: 0;
        li {
          padding: 0;
          margin: 0;
          margin-bottom: spacing(-3);
          &::before {
            content: none;
          }
        }
        .timeline__course__badge {
          margin: 0;
          &::before {
            font-size: font-size(0);
          }
          &--passed {
              @include set-colors("utility-confirm");
              border-color: color("utility-confirm");
          }
        }
    }
}