Bühnen-Einschub (Startseite): Autocomplete Search

.stage-insert-startpage {
  color: rgba(#fff, 0.9);
  margin-top: 3.5rem;

  @include mq($from: l) {
    display: flex;
    height: 21rem;
  }
}

.stage-insert-startpage__side {
  position: relative;

  .select,
  input {
    border: 0;
    height: 6rem;
  }

  .stage-insert-startpage__form {
    background-color: $color-red;
    padding: 2rem 3rem;

    @include mq($from: l) {
      left: 0;
      padding: 2rem 2.8rem 1rem;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  .stage-insert-startpage__list {
    background-color: $color-blue;
  }

  @include mq($from: l) {
    width: 60%;

    &:first-child {
      background-color: $color-red;
      width: 40%;
    }
  }

  @include mq($from: xl) {
    width: 66.66%;

    &:first-child {
      width: 33.33%;
    }
  }
}

.stage-insert-startpage__form {
  .headline {
    margin-bottom: 1.5rem;
  }

  .form {
    margin-bottom: 0;
    margin-top: 0;
  }

  .form-group {
    margin-bottom: 1.5rem;
    max-width: 100%;
  }

  .form-group:not(:first-child),
  .form__submit {
    display: none;
  }

  .form__submit {
    height: auto;
    margin: 0 0 1.5rem;
  }

  .form__submit .button {
    width: 100%;
  }
}

.stage-insert-startpage__shutdown {
  align-items: center;
  color: $root-color;
  cursor: pointer;
  display: inline-flex;
  font-size: 1.7rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 3rem;
  top: -3rem;

  .stage-insert-startpage__shutdown-icon {
    color: #000;
    font-size: 1.2rem;
    margin-left: 1rem;
    margin-right: 0;
  }

  @include mq($from: l) {
    right: 0;
  }
}

.stage-insert-startpage--active {
  &::after {
    background-color: rgba(#fff, 0.7);
    content: '';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 108;
  }

  .stage-insert-startpage__form--active .stage-insert-startpage__shutdown {
    opacity: 1;
    pointer-events: auto;
  }

  .stage-insert-startpage__form .form-group,
  .stage-insert-startpage__form .form__submit {
    display: block;
  }

  .overview-page__stage-insert {
    z-index: 999;
  }

  .stage-insert-startpage__list {
    position: relative;
    z-index: -1;
  }

  .stage-insert-startpage .stage-insert-startpage__side:last-child {
    background-color: rgba(#fff, 0.7);
    pointer-events: none;
  }
}

.stage-insert-startpage__content {
  > :last-child {
    margin-bottom: 0;
  }
}

.stage-insert-startpage__select,
.stage-insert-startpage__input {
  &:focus {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
}

.stage-insert-startpage__list {
  @include list-reset();

  display: flex;
  height: 100%;
}

.stage-insert-startpage__list-item {
  align-items: center;
  display: flex;
  flex: 0 0 25%;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 25%;
  padding: 1rem 1.3rem;
  position: relative;
  text-align: center;

  + .stage-insert-startpage__list-item {
    border-left: 0.2rem solid $color-anthracite;
  }

  @include mq($from: m) {
    padding: 2rem;
  }
}

.stage-insert-startpage__list-icon {
  font-size: 3.4rem;
  margin-bottom: 1rem;
  margin-right: 0;

  @include mq($from: l) {
    font-size: 6.6rem;
  }
}

.stage-insert-advantages__list-text {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  width: 100%;
  word-break: break-word;

  @include mq($from: l) {
    font-size: 1.7rem;
  }
}

.stage-insert-startpage__list-item-link {
  display: block;
}

.overview-page__stage-insert-startpage {
  &.overview-page__stage-insert {
    margin-bottom: 0;

    @include mq($from: m) {
      margin-top: -16rem;
    }
  }

  .overview-page__container {
    max-width: 119rem;
    padding: 0;

    @include mq($from: l) {
      padding-left: 4rem;
      padding-right: 4rem;
    }
  }
}

.stage-insert-startpage--active {
  .stage-insert-startpage {
    z-index: 999;
  }
}

.stage-insert-startpage--autocomplete-search {
  position: relative;

  .select-choices .select-choices__inner {
    height: 6rem;
  }

  .select-choices .select-choices__inner,
  .select-choices .select-choices__inner:focus,
  .select-choices .select-choices__inner:hover,
  .select-choices__list--dropdown {
    border-color: transparent;
  }

  .select-choices__list--single,
  .select-choices__item--selectable {
    height: 100%;
  }

  .select-choices__inner .select-choices__item--selectable {
    color: $color-steelgrey-xdark;
    padding-top: 0.65rem;
  }

  .select-choices__list--dropdown {
    border-color: transparent;
  }

  .select-choices__input {
    background-color: transparent;
    color: $color-steelgrey-xdark;
    height: 4rem;
    padding-left: 1.5rem !important;
  }

  .select-choices__list--dropdown .select-choices__item {
    border-bottom: 0;
    color: $color-anthracite;
  }

  .select-choices__list .is-highlighted {
    background-color: $color-blue;
    color: #fff;
  }
}