.timeline {
  height: $navbar-height;

  .bar {
    bottom: 0;
    height: 10px;
    position: absolute;
    z-index: 2;
  }

  .bar-bkg {
    background-color: $medium-grey;
    bottom: 0;
    height: 10px;
    position: absolute;
    width: 100%;
  }

  .pointer {
    position: absolute;
    z-index: 10;
    cursor: auto;
  }

  .trsp-pointer {
    height: 51px;
  }

  .timeline-date {
    font-size: $font-size-m;
    letter-spacing: $text-letter-spacing;
    margin-top: -30px;
    position: absolute;
    white-space: nowrap;
  }
}

.timeline-container:last-child {
  border-top-style: solid;
  border-top-width: 1px;
}

.menu-container {
  .menu-item {
    font-size: $font-size-xs;
    padding: 5px 20px;
  }
}

.minimized-timeline {
  padding: 20px 20px;
  height: 100%;
  position: relative;
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  justify-content: space-between;
  border-bottom-style: solid;
  border-bottom-width: 1px;

  .not-active {
    background-color: $light-grey;
  }

  .timeline-number {
    border: 2px solid $white;
    border-radius: 18px;
    display: inline-block;
    color: $white;
    font-size: $font-size-xxxs;
    height: 18px;
    line-height: 14px;
    padding: 0 0 0 1px;
    position: relative;
    text-align: center;
    width: 18px;
    z-index: 2;

    .assembl-icon-checked {
      &:before {
        font-size: $font-size-xxxs;
      }
    }
  }

  .timeline-graph {
    position: relative;
    margin-right: 3px;
    z-index: 1;

    .timeline-bars {
      display: inline-block;
      width: calc(100% - 10px);
      height: 9px;

      .timeline-bar-background-container {
        background-color: $white;
        height: 6px;
        position: absolute;
        width: 100%;
        z-index: 0;
        display: inline-block;

        .timeline-bar-background {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
          opacity: 0.7;
        }
      }

      .timeline-bar-filler {
        background-color: $white;
        height: 6px;
        position: absolute;
        z-index: 1;
        display: inline-block;
      }
    }
  }

  .timeline-arrow {
    transition: none;
    position: absolute;
    left: calc(50% - 9px);
    height: 22px;
    width: 22px;
    transform: rotate(45deg);
    bottom: -5px;
    display: none;
  }

  .timeline-title {
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: left;

    .arrow {
      color: $white;
      margin-right: 5px;
      height: 15px;

      &::before {
        font-size: 17px;
      }
    }

    .timeline-link {
      height: 100%;
      padding-right: 10px;
    }
  }

  .txt-not-active {
    .timeline-link {
      color: $light-grey;
      font-family: $font-family4;
    }
  }

  .txt-active-bold {
    .timeline-link {
      color: $white;
      font-family: $font-family3;
    }
  }

  .assembl-icon-down-dir:before {
    font-size: 15px;
  }

  &.active {
    .timeline-arrow {
      display: block;
    }

    .txt-active-light {
      .timeline-link {
        font-family: $font-family3;
      }
    }
  }
}

@media screen and (max-width: $screen-xxs-max) {
  .timeline {
    display: none;

    .timeline-date {
      display: none;
    }
  }
}
