.tui-facts {
  padding: $margin-normal $margin-enterprise;
  border: 1px solid rgba($color-blue-400, .2);
  border-top: 0;
  border-radius: 0 0 $border-radius-base $border-radius-base;

  h2 {
    margin-top: $margin-half;
  }

  .tui-fact-container:not(:last-child) {
    margin-bottom: $margin-double;
  }

  @include breakpoint(lg) {
    display: flex;
    padding: 36px 0;

    .tui-fact-container {
      flex-grow: 1;
      display: flex;
      flex-flow: column nowrap;
      width: calc(33.33333% - #{$margin-normal});
      padding: 0 $margin-double;

      &:nth-child(2) {
        border-left: 1px solid $color-blue-300;
        border-right: 1px solid $color-blue-300;
      }

      &:not(:last-child) {
        margin-bottom: 0;
      }
    }
  }

  .empty-state {
    flex-grow: 1;
    align-items: center;
    justify-content: center;

    p {
      text-align: center;
    }
  }

  .tui-weather-items .empty-state {
    font-size: 1.6rem;
    text-align: center;
  }

  .strike-text {
    margin-bottom: $margin-normal;
  }
}

.tui-fact-heading {
  @extend %flexbox-row;
  align-items: baseline;
}

.dp-sub-page {
  font-weight: bold;
  margin-left: $margin-enterprise;
  display: inline-block;

  > .pictogram {
    vertical-align: bottom;
  }

  @include breakpoint(sm) {
    margin-left: $margin-double;
  }
}

.tui-facts-box-item,
.tui-weather-items,
.tui-price-level-items,
.tui-good-to-know-container,
.empty-state {
  @extend %flexbox-row;
}

.tui-price-level-items,
.tui-good-to-know-container {
  flex-direction: column;
}

.tui-facts-box-item,
.empty-state,
.tui-weather-items .empty-state {
  background-color: $color-blue-200;
  border-radius: $border-radius-normal;
  padding: $margin-enterprise;

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

  .right {
    margin-left: auto;
  }

  .right,
  .left {
    font-weight: bold;
  }
}

@media only screen and (min-width: $screen-sm-min) and (max-width: 991px) {
  .tui-weather {
    display: flex;
    flex-direction: column;
  }
}

.tui-weather-items {
  flex-wrap: wrap;
  margin: $margin-double -3px 0;

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

  li {
    @extend %flexbox-row;
    width: calc(50% - #{$margin-half});
    margin: 0 3px $margin-half;
    height: 106px;
    background: $color-white;
    border-radius: $border-radius-normal;
    justify-content: center;

    > div {
      margin-left: $margin-normal;

      @include breakpoint(lg) {
        margin-left: $margin-double;
      }
    }

    @include breakpoint(sm) {
      width: calc(25% - #{$margin-normal});
      margin: 0 $margin-half $margin-half;
    }

    @include breakpoint(lg) {
      width: calc(50% - #{$margin-normal});
      margin: 0 $margin-half $margin-normal;
      padding: $margin-double 0;
    }
  }

  .pictogram {
    height: 3em;
    width: 3em;
  }

  .day {
    border-top: 6px solid $color-red-400;
    color: $color-red-400;
  }

  .night {
    border-top: 6px solid $color-blue-500;
    color: $color-blue-500;
  }

  .water {
    border-top: 6px solid $color-blue-400;
    color: $color-blue-400;
  }

  .rain {
    border-top: 6px solid $color-blue-300;
    color: $color-blue-300;
  }
}

.tui-price-level-items {
  margin: $margin-normal 0;

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

  @include breakpoint(lg) {
    flex-direction: column;
  }

  li {
    margin-bottom: $margin-half;

    @include breakpoint(sm) {
      width: calc(33.33333% - #{$margin-half});
      margin: 0 $margin-half;
    }

    @include breakpoint(lg) {
      width: calc(100% - #{$margin-normal});
      margin-bottom: $margin-normal;

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

.tui-price-level {
  @include breakpoint(sm) {
    .tui-facts-box-column {
      flex-direction: row;
      margin: 0 (-$margin-half);

      li {
        width: calc(33.33333% - #{$margin-half});
        margin: 0 $margin-half;
      }
    }
  }
}

.tui-good-to-know-container {
  li {
    margin-bottom: $margin-half;

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

  .left {
    font-weight: normal;
  }

  .country-facts {
    margin: 0;

    .pictogram {
      margin-right: $margin-normal;
    }

    strong {
      margin-left: $margin-half;
    }
  }

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

    .tui-short-facts {
      margin-top: 0;
      flex-grow: 1;
      width: calc(33.33333% - #{$margin-normal});
    }

    .country-facts {
      flex-grow: 2;
      margin-left: $margin-quadruple;
      margin-top: 0;
    }
  }

  @include breakpoint(lg) {
    flex-direction: column;

    .tui-short-facts {
      display: flex;
      width: auto;
      margin: 0 -6px 24px;

      li {
        width: calc(33.33333% - #{$margin-normal});
        margin: 0 $margin-half;
        flex-grow: 1;
      }
    }

    .country-facts {
      margin-left: 0;
    }

    .right {
      margin-left: 0;
    }

    .tui-facts-box-item {
      flex-direction: column;
    }
  }
}

.hotel-weather-section {
  .strike-text {
    margin-bottom: $margin-normal;

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

  .tui-weather-items {
    li {
      @include breakpoint(sm) {
        font-weight: bold;
        height: 172px;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
      }

      @include breakpoint(lg) {

        height: auto;
        flex-direction: row;
        justify-content: center;
      }
    }

    @include breakpoint(lg) {
      flex-wrap: nowrap;
    }
  }
}