.day-timeline {
  padding: 0 0 $margin-normal;
  margin: 0;

  li {
    @include font-size(24);
    display: none;

    @include breakpoint(sm) {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      font-weight: bold;
      margin: $margin-normal 0;
      color: $color-link-blue;
      cursor: pointer;
    }

    &:first-child {
      margin-top: 0;
    }
  }

  .index {
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    text-align: center;
    height: $margin-triple;
    width: $margin-triple;
    border: 2px solid $color-link-blue;
    border-radius: 50%;
    flex-shrink: 0;

    @include breakpoint(sm) {
      display: flex;
      margin-right: $margin-normal;
    }
  }

  .at-sea {
    border: none;
  }

  .dots-container {
    display: flex;
    justify-content: center;
    align-items: center;

    @include breakpoint(sm) {
      display: none;
    }
  }

  .dots {
    width: $margin-half;
    height: $margin-half;
    background-color: $color-blue-450;
    opacity: .6;
    border-radius: 50%;
    display: inline-block;
    margin: $margin-half;

    &.active {
      width: $margin-normal;
      height: $margin-normal;
      opacity: 1;
    }
  }

  .selected {
    @extend %flexbox-column;
    color: $color-blue-500;
    align-items: center;

    @include breakpoint(sm) {
      flex-direction: row;
    }

    .index {
      display: none;

      &.at-sea {
        background: none;
        color: inherit;
      }

      @include breakpoint(sm) {
        display: inline-flex;
        background: $color-blue-500;
        color: $color-white;
        border-color: $color-blue-500;
      }
    }
  }

  .legend {
    @extend %flexbox-row;
    justify-content: center;
    align-items: center;
    width: 100%;

    .location {
      @include font-size(16);
      margin: 0;
      text-align: center;
      font-weight: bold;
      width: 100%;

      @include breakpoint(sm) {
        @include font-size(24);
        text-align: left;
      }
    }

    .not-visable {
      visibility: hidden;
    }

    .pictogram {
      width: $margin-quadruple;
      height: $margin-quadruple;
    }

    .next {
      align-self: flex-end;
    }

    .previous {
      align-self: flex-start;
    }

    .previous,
    .next {
      display: flex;
      padding: $margin-half $margin-normal;
      color: $color-blue-400;

      @include breakpoint(sm) {
        display: none;
      }
    }
  }
}

.cruise-day-timeline {
  background-color: $color-white;
  order: 2;

  @include breakpoint(sm) {
    order: 1;
    padding: $margin-double;
    background-color: $color-blue-100;
  }

  @include breakpoint(lg) {
    padding: $margin-quadruple;
  }
}