$thumb-nail-image: 108px;

.travel-schedule {
  &-row {
    position: relative;
    display: flex;
    margin-bottom: $margin-half;
    width: 100%;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .accordion-item-row {
    width: 100%;
  }

  .pictogram {
    &.small {
      height: $margin-enterprise;
      width: $margin-enterprise;
      margin: 0 $margin-half 0 0;
      color: $color-grey;

      @include breakpoint(sm) {
        margin: 0 $margin-half;
      }
    }

    &:not(.small) {
      margin: 0 auto;
    }
  }

  .index-box {
    &-container {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      background-color: $color-blue-200;
      overflow: hidden;
      border-radius: $margin-half 0 0 $margin-half;
      max-width: $margin-quadruple;

      @include breakpoint(sm) {
        width: 100%;
        max-width: 100%;
        box-shadow: $box-shadow-card;
        border-radius: $margin-normal;
        background-color: $color-white;
      }
    }

    .day,
    .day-text {
      text-align: center;
    }

    .day {
      @include font-size(24);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 $margin-enterprise;
      height: 100%;
      color: $color-blue-500;
      font-weight: bold;

      @include breakpoint(sm) {
        background-color: $color-white;
        padding: $margin-half;
        height: auto;
      }
    }

    .day-text {
      @include font-size(14);
      display: none;
      padding: $margin-third;
      background-color: $color-blue-300;
      color: $color-white;
      font-weight: bold;

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

    @include breakpoint(sm) {
      position: relative;
      display: flex;
      flex-direction: column;
      width: $margin-sextuple;
      height: auto;
      margin-right: $margin-half;
    }
  }

  .index-box-container.active {
    border-radius: $margin-half 0 0 0;
    height: $margin-quadruple;

    @include breakpoint(sm) {
      border-radius: $margin-normal;
      height: $margin-sextuple;
    }
  }

  &.tui-accordion {
    .accordion-item {
      width: 100%;
      overflow: hidden;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      border: 0;
      box-shadow: $box-shadow-card;
      background-color: $color-white;
      border-radius: $margin-half;
      margin-bottom: 0;
      padding: $margin-normal;

      &:first-child {
        padding-top: $margin-half;
      }

      @include breakpoint(sm) {
        border-radius: $margin-normal;
        min-height: $margin-sextuple;
      }
    }

    .accordion-item.active {
      @include breakpoint(sm) {
        padding: $margin-enterprise $margin-normal $margin-normal;
      }
    }

    .accordion-item-img {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: $thumb-nail-image;

      img {
        width: 100%;
      }

      &.active {
        display: none;
      }

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

    .second-line,
    .time-at-land {
      display: none;

      @include breakpoint(md) {
        display: block;
      }
    }

    .line,
    .second-line {
      border-top: 1px solid $color-blue-200;
      width: $margin-enterprise;
      height: 1px;
      margin: 2px $margin-half 0 $margin-half;

      @include breakpoint(sm) {
        width: $margin-quadruple;
        margin: 2px $margin-normal 0 $margin-normal;
        border-top: 2px solid $color-blue-200;
      }
    }

    .schedule-destination {
      display: flex;
      align-items: center;
      width: 100%;

      @include breakpoint(sm) {
        width: auto;
      }
    }

    .country-flag {
      margin-right: $margin-normal;
      width: $margin-enterprise;
      height: $margin-enterprise;

      @include breakpoint(sm) {
        width: $margin-triple;
        height: $margin-triple;
        display: block;
      }
    }

    .trigger {
      background: transparent;
      padding: 0;
      padding-left: $margin-quadruple;
      position: relative;

      @include breakpoint(sm) {
        padding-left: $thumb-nail-image + $margin-normal;
      }
    }

    .trigger.active {
      @include breakpoint(sm) {
        padding-left: 0;
      }
    }
  }

  .basic-facts {
    @extend %flexbox-row;
    padding: 0 0 $margin-normal;
    margin: 0;
    align-items: center;

    p,
    h3 {
      margin: 0 $margin-normal 0 0;
    }

    .cruise-destination {
      @include font-size(16);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      @include breakpoint(sm) {
        @include font-size(24);
        max-width: 200px;
      }

      @include breakpoint(md) {
        max-width: 400px;
      }
    }
  }

  .schedule-time-group {
    display: none;
    width: 100%;

    @include breakpoint(sm) {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      order: 0;
      flex-grow: 3;
      flex-basis: 0;
      margin-right: $margin-normal;
      width: auto;
    }

    @include breakpoint(md) {
      margin-right: $margin-octuple;
    }
  }

  .time-at-land {
    display: none;

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

  .schedule-time {
    display: flex;
    align-items: center;
  }

  .active {
    .schedule-time-group {
      @include font-size(14);
      display: flex;
      align-items: center;
      position: absolute;
      top: $margin-double;

      @include breakpoint(sm) {
        @include font-size(18);
        position: relative;
        top: 0;
      }
    }
  }

  .tui-text-expander {
    margin-top: $margin-triple;

    @include breakpoint(sm) {
      margin-top: $margin-enterprise;
    }
  }

  .tui-text-expander-content {
    .ratio-16-9 {
      margin-bottom: $margin-normal;
    }

    img {
      border-radius: $margin-normal;
    }

    .read-more {
      color: $color-blue-450;
      font-weight: bold;
      cursor: pointer;
    }

    > li {
      @extend %flexbox-column;

      @include breakpoint(sm) {
        flex-direction: row;
        align-items: flex-start;
        border-bottom: 1px solid $color-tui-grey-25;
        padding-bottom: $margin-triple;
        margin-bottom: $margin-triple;
      }
    }

    @include breakpoint(sm) {
      .ratio-16-9 {
        flex-grow: 1;
        flex-basis: 0;
        margin-right: $margin-double;
        margin-bottom: 0;
      }

      .tui-text-content {
        flex-grow: 2;
        flex-basis: 0;
      }
    }

    > li:last-child {
      border-bottom: 0;
      padding-bottom: 0;
      margin-bottom: 0;
    }

    &:nth-child(n) {
      padding: 0;
    }
  }
}