$carouselButtonSize: 60px;

.lowest-price-animation:not(.selected) {
  color: $color-red-300;
}

.destination-box {
  display: flex;
  background-color: $color-white;
  flex-direction: column;
  padding: $margin-normal 0 $margin-normal $margin-normal;
  width: 100%;
  box-shadow: $box-shadow-card;
  border-radius: $margin-normal;
  margin-bottom: $margin-normal;
  -ms-overflow-style: none;

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

  &.gradient {
    background: linear-gradient($color-white 60%, $color-blue-300);
  }

  .tui-card,
  .tui-card:link:hover {
    box-shadow: none;
    height: 100%;
  }

  .carousel-cell {
    margin: 0;
    margin-right: $margin-normal;

    .media-container {
      height: 40%;

      @include breakpoint(lg) {
        height: 60%;
      }
    }
  }

  .tui-card .pricing.mini {
    width: auto;
  }

  .tui-product-card {
    .pricing.mini {
      margin: $margin-normal;
      padding: 0;
      background: none;
    }
  }

  .product-card-info-main {
    padding: $margin-normal;
  }

  .tui-card .tui-price-info-wrap {
    padding: 0;
  }

  .tui-card .tui-price-info-wrap.mini .price-example-from-price {
    margin-right: 0;
  }

  .country-flag {
    width: 24px;
    height: 24px;
    border-radius: $margin-quarter;
  }

  &__header {
    display: flex;
    flex-direction: column;
    margin-bottom: $margin-double;
    justify-content: space-between;

    h2 {
      display: inline-block;
      margin-left: $margin-normal;
      align-self: center;
    }

    @include breakpoint(sm) {
      margin-bottom: $margin-normal;
      flex-direction: row;
    }
  }

  &__months {
    overflow: hidden;
    height: 72px;

    &-container {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      padding-bottom: 20px;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar-track-piece {
        background-color: transparent;
      }

      &::-webkit-scrollbar {
        display: none;
        background: transparent;
      }

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

      &:after {
        content: '';
        display: block;
        padding-right: 1px;
        margin-left: -1px;

        @include breakpoint(sm) {/* stylelint-disable max-nesting-depth */
          /* stylelint-enable */
          display: none;
        }
      }
    }

    &__price-box {
      $g: &;
      flex: 0 0 auto;
      padding: $margin-normal $margin-double;
      text-align: center;
      background-color: $color-blue-100;
      border-radius: $margin-half;
      margin-right: $margin-half;
      white-space: nowrap;
      min-width: 74px;
      display: flex;
      align-content: center;
      align-items: center;
      flex-direction: column;
      border: 1px solid transparent;
      transition: box-shadow .5s ease-in-out, background .1s;

      &:not(.has-price) {
        color: $color-blue-300;
      }

      @include breakpoint(sm) {
        min-width: 84px;
      }

      @include breakpoint(lg) {
        min-width: unset;
      }

      @for $i from 2 through 12 {
        /* stylelint-disable max-nesting-depth */
        &:first-child:nth-last-child(#{$i}),
        &:first-child:nth-last-child(#{$i}) ~ & {
          width: calc(#{percentage(1 / $i)} - #{$margin-half});
        }
        /* stylelint-enable */
      }

      > span {
        display: block;
      }

      &-month {
        text-transform: uppercase;
        font-weight: bold;
        color: $color-blue-400;

        /* stylelint-disable max-nesting-depth */
        @at-root {
          #{$g}.selected #{$g}-month {
            color: $color-white;
          }

          #{$g}.lowest-price-animation:not(.selected) #{$g}-month {
            color: $color-red-300;
          }
        }
        /* stylelint-enable */
      }

      &-value {
        @include font-size(14);
        font-weight: bold;

        /* stylelint-disable max-nesting-depth */
        @include breakpoint(sm) {
          @include font-size(18);
        }
        /* stylelint-enable */
      }

      &:last-child {
        margin-right: $margin-normal;
      }

      &.selected {
        background-color: $color-red-300;
        color: $color-white;
        transition: 0s;
        box-shadow: none;
      }

      &.has-price:hover {
        cursor: pointer;
        border: 1px solid $color-blue-300;
        transition: .2s ease-in-out;
      }
    }
  }

  &__calendar {
    padding-right: $margin-normal;
    position: relative;

    &.has-multiple-hotels {
      margin-bottom: 46px;

      @include breakpoint(sm) {
        margin-bottom: auto;
      }
    }

    &.has-single-hotel {
      margin-bottom: auto;

      .flickity-enabled {
        height: 100%;
      }
    }

    @include breakpoint(sm) {
      display: flex;
      margin-bottom: auto;

      [class^='ratio-'] .rounded {
        border-radius: $margin-half $margin-half 0 0;
      }
    }

    @include breakpoint(lg) {
      margin-bottom: 0;
    }
  }

  &__summary {
    @include font-size(14);
    margin-right: $margin-normal;
    margin-top: $margin-normal;
    font-weight: bold;

    :empty() {
      height: 20px;
    }

    span {
      margin-right: $margin-normal;
    }

    svg {
      margin-bottom: -.4em;
      margin-right: $margin-half;
      color: $color-blue-450;

      @include breakpoint(sm) {
        margin-bottom: -.2em;
      }
    }

    @include breakpoint(sm) {
      @include font-size(16);
      margin-top: inherit;
    }

    @include breakpoint(lg) {
      @include font-size(18);
    }
  }

  .flickity-container {
    position: relative;
    padding-top: $margin-normal;
    flex: 1;
    height: 295px;

    @include breakpoint(sm) {
      height: auto;
      border-top: none;
      border-bottom: none;
    }
  }

  .flickity-enabled {
    position: static;
    height: 100%;
    overflow: hidden;

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

    @include breakpoint(lg) {
      height: 100%;

      .show-gradient:after,
      .show-gradient:before {
        content: '';
        position: absolute;
        pointer-events: none;
        height: 100%;
        top: 0;
        width: 80px;
        z-index: 1;
      }

      .show-gradient-right:after {
        right: 0;
        background-image: linear-gradient(to right, rgba($color-white, 0), rgba($color-white, 1) 90%);
      }

      .show-gradient-left:before {
        left: 0;
        background-image: linear-gradient(to left, rgba($color-white, 0), rgba($color-white, 1) 90%);
      }
    }
  }

  .flickity-enabled:first-child {
    margin-left: 0;
  }

  .flickity-page-dots {
    list-style-position: inside;
    bottom: -42px;
    width: 80%;
    left: 10%;

    @include breakpoint(sm) {
      bottom: 0;
    }
  }

  .flickity-page-dots .dot {
    opacity: .6;
    width: $margin-half;
    height: $margin-half;
    background: $color-white;
  }

  .flickity-page-dots .dot:not(.is-selected) {
    margin-bottom: 3px;
  }

  .flickity-page-dots .dot.is-selected {
    background: $color-white;
    width: $margin-normal;
    height: $margin-normal;
  }

  .flickity-button {
    color: $color-blue-400;
    background: $color-white;
    display: none;

    @include breakpoint(lg) {
      display: inline;
      z-index: 2;
    }
  }

  .flickity-button:active {
    background: white;
  }

  .flickity-prev-next-button {
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, .2);
    width: $carouselButtonSize;
    height: $carouselButtonSize;
    border-radius: 50%;

    &:hover {
      background: $color-blue-300;
      color: $color-white;
    }

    &:disabled {
      display: none;
    }
  }

  .flickity-prev-next-button.previous {
    left: -30px;

    .flickity-button-icon {
      left: 15%;
      top: 18%;
    }
  }

  .flickity-prev-next-button.next {
    right: -30px;

    .flickity-button-icon {
      left: 25%;
      top: 30%;
    }
  }

  .next-hotel-price {
    display: none;
    position: absolute;
    right: 60px;
    bottom: -40px;
    color: $color-blue-400;
    font-weight: bold;

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

  .hide-navigation .flickity-page-dots,
  .hide-navigation .flickity-prev-next-button {
    display: none;
  }
}