.tui-text-content {
  .tui-accordion {
    list-style: none;
    padding: 0;
  }
}

.tui-accordion {
  margin: 0 0 $margin-normal;

  .accordion-item {
    border: 1px solid $color-blue-200;
    border-radius: $border-radius-normal;
    margin-bottom: $margin-normal;
  }

  .tui-text-expander {
    overflow: hidden;
    background: $color-white;
    width: 100%;

    a {
      font-weight: bold;
    }
  }

  .tui-text-expander-content {
    overflow: hidden;
    padding: $margin-double $margin-double $margin-normal;
    margin: 0;
  }

  .trigger {
    @extend %flexbox-row;
    padding: $margin-enterprise $margin-double;
    background: $color-blue-100;
    margin: 0;
    line-height: 24px;
    cursor: pointer;

    .pictogram-plus {
      display: block;
      transition: transform .1s;
      transform-origin: 50% 50%;
      width: 24px;
      height: 24px;
    }
  }

  .active {
    .pictogram-plus {
      transform: rotate(45deg);
    }
  }
}

.hotel-facts {
  &.cruise-facts {
    .facts-accordion {
      margin: $margin-normal;
      padding-top: $margin-normal;
    }
  }

  @include breakpoint(lg) {
    display: flex;
    margin: 0 -#{$margin-double};

    &.cruise-facts {
      margin: 0;

      .facts-accordion {
        margin: $margin-normal 0 $margin-double;
      }
    }
  }
}

.cruise-facts {
  .tui-text-content {
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    li {
      background: $color-beige-200;
      padding: $margin-half;
      margin: $margin-half 0;
    }
  }

  .facts-accordion:first-child {
    padding-left: 0;
  }

  .facts-accordion:last-child {
    padding-right: 0;
  }
}

.facts-accordion {
  @extend %flexbox-column;

  @include breakpoint(lg) {
    width: 50%;
    padding: 0 $margin-double;
    margin: 0;

    &:not(:last-child) {
      border-right: 1px solid $color-beige-200;
    }
  }

  .tui-text-expander {
    background: inherit;
  }

  .tui-text-content {
    padding: 0;

    @include breakpoint(sm) {
      width: 100%;
    }

    table {
      border-spacing: 0 6px;
      border-collapse: inherit;
    }

    td {
      border: 1px solid $color-beige-200;
    }

    td:nth-child(odd) {
      font-weight: bold;
      border-radius: $border-radius-normal 0 0 $border-radius-normal;

      @include breakpoint(sm) {
        width: 35%;
      }
    }

    td:nth-child(even) {
      border-radius: 0 $border-radius-normal $border-radius-normal 0;
      text-align: right;
    }

    tr,
    tr:nth-child(odd) {
      background: $color-beige-200;
    }

    .service-level-period {
      color: $color-grey;
    }

    .service-level-text:not(:last-child) {
      margin-bottom: $margin-double;
    }
  }

  .accordion-item {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid $color-beige-200;

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

  .trigger {
    padding: $margin-half 0 $margin-enterprise;
    background: none;
    text-transform: uppercase;

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

.room-accordion {
  margin: 0;

  .accordion-item {
    border: 0;
    border-top: 1px solid $color-beige-200;
  }

  .trigger {
    padding: $margin-normal 0;
    background: none;
    color: $color-link-blue;
  }

  .tui-text-content {
    padding: $margin-double 0 0;
  }
}

@include breakpoint(sm) {
  .room-accordion {
    .accordion-item {
      border: 0;
    }

    .trigger {
      color: $color-blue-500;

      .pictogram {
        display: none;
      }
    }
  }
}

.concept-accordion {
  margin-bottom: 0;
  padding-top: $margin-double;
  border-top: 1px solid $color-beige-200;

  .accordion-item {
    border-radius: $border-radius-input;

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

  .trigger {
    transition: background-color .2s ease;
    background: $color-blue-200;
    color: $color-link-blue;
  }

  .active {
    border-color: $color-blue-100;

    .trigger {
      background: $color-blue-100;
    }
  }

  .tui-text-expander {
    background: $color-blue-100;
  }

  .tui-text-expander-content {
    border-top: 1px solid $color-blue-200;
    margin: 0 $margin-double;
    padding: $margin-double 0 $margin-normal;
  }
}