// based on tingle v0.12.0
/* stylelint-disable selector-class-pattern */
.tingle-modal {
  @extend %flexbox-column;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 300000;
  visibility: hidden;
  overflow: hidden;
  background: rgba($color-black, .8);
  opacity: 0;
  cursor: pointer;
  transition: transform .2s ease;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;

  .tui-container,
  .container {
    width: 100%;
  }

  .tui-breadcrumb,
  .tui-article-breadcrumbs,
  .tui-subnav-wrapper {
    display: none;
  }

  .tui-article-section {
    margin: $margin-normal 0;
  }

  .tui-hero {
    max-height: 480px;
    overflow: hidden;
  }

  .tui-article {
    margin: $margin-double 0;
    padding: 0;

    &-button-close {
      top: $margin-normal;
      right: $margin-normal;
      left: auto;
    }

    &-breadcrumbs {
      margin: 0;
    }

    &.tui-blog {
      .tui-article-breadcrumbs {
        display: block;
      }

      .date {
        text-align: left;
      }
    }
  }
}

// confirm and alerts
.tingle-modal--confirm .tingle-modal-box {
  text-align: center;
}

// modal
.tingle-modal--noOverlayClose {
  cursor: default;
}

.tingle-modal--noClose .tingle-modal__close {
  display: none;
}

.tingle-modal__close {
  display: none;
}

.tingle-modal-box {
  position: relative;
  flex-shrink: 0;
  margin-top: $margin-normal;
  margin-bottom: auto;
  width: 100%;
  border-radius: $border-radius-normal;
  background: transparent;
  opacity: 1;
  cursor: auto;
  transition: transform .3s cubic-bezier(.175, .885, .32, 1.275);
  transform: scale(.8);

  @include breakpoint(sm) {
    width: 90%;
    max-width: 1100px;
  }

  .modal-header {
    height: 60px;
    text-align: center;
    width: 100%;
    background-color: $color-blue-400;
    border-radius: $border-radius-normal $border-radius-normal 0 0;

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

  .main-content {
    background: $color-white;
    padding: 0;

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

    .tui-section {
      padding: $margin-normal;

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

    .tui-section:first-child {
      padding-top: $margin-normal;
    }

    .good-to-know-heading {
      max-width: 100%;
    }

    .cux-weather-year:last-child {
      margin-bottom: 0;
    }
  }
}

.facts-modal {
  .main-content {
    @include breakpoint(sm) {
      padding-bottom: 0;

      .tui-section:first-child {
        padding-bottom: $margin-double;
      }
    }
  }
}

.tingle-enabled {
  overflow: hidden;
  height: 100%;

  .tingle-content-wrapper {
    filter: blur(15px);
  }
}

.tingle-modal--visible {
  visibility: visible;
  opacity: 1;

  .tingle-modal-box__footer {
    bottom: 0;
  }

  .tingle-modal-box {
    transform: scale(1);
  }
}

.tingle-modal--overflow {
  overflow-y: scroll;
}

// responsive
@media (max-width: 540px) {
  .tingle-modal {
    top: 0;
    display: block;
    width: 100%;
  }

  .tingle-modal-box {
    width: auto;
    border-radius: 0;
  }

  .tingle-modal-box__content {
    overflow-y: scroll;
  }

  .tingle-modal--noClose {
    top: 0;
  }

  .tingle-modal--noOverlayClose {
    padding-top: 0;
  }

  .tingle-modal-box__footer .tingle-btn {
    display: block;
    float: none;
    margin-bottom: 1rem;
    width: 100%;
  }
}

.image-modal {
  .tui-modal-heading {
    @include breakpoint(sm) {
      margin-left: $margin-triple;
    }

    padding-top: 0;
  }

  .tui-image-gallery,
  .tingle-modal-box__content {
    padding-bottom: 0;
  }
}

.hotel-modal {
  .main-content {
    padding: 0 $margin-enterprise $margin-enterprise;

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

    .tui-section {
      margin: 0 -#{$margin-enterprise};
      padding: $margin-enterprise;

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

.configurator-modal {
  .modal-header {
    height: 20px;
    background: $color-blue-400;
  }

  .main-content {
    padding: $margin-normal 0;

    @include breakpoint(md) {
      padding: $margin-double $margin-normal;
    }
  }

  .matrix-configurator-slot {
    background: $color-beige-100;
  }
}

.configurator-heading {
  @extend %flexbox-column;
  background: $color-blue-400;
  align-items: center;
  text-align: center;
  padding: 0 $margin-triple $margin-normal;

  h1 {
    color: $color-white;
  }

  h2 {
    color: $color-black;
  }
}

/* stylelint-enable */