$mobile-height: 300px;
$light-height: 300px;
$desktop-height: 600px;
$desktop-height-a-b-test: 480px;

.tui-hero {
  @extend %flexbox-column;
  position: relative;
  background: $color-blue-300;
  overflow-x: hidden;

  .blogoverviewpage & {
    min-height: 156px;
  }

  .hero-text-container {
    overflow: hidden;
  }

  > .container {
    padding: 0;
  }

  .tui-text-in-image {
    z-index: 2;
  }

  .btn-icon,
  .btn-favorite {
    .text {
      display: none;
    }
  }

  .favourite-heart-container {
    margin: 0;

    .favourite-heart {
      display: inline-block;
      min-width: 0;
      width: auto;
    }
  }
}

.button-container {
  @extend %flexbox-row;
  justify-content: space-between;
  position: absolute;
  z-index: 3;
  bottom: $margin-normal;
  background: transparent;

  .actions:first-of-type {
    @extend %flexbox-column;
    align-items: flex-start;

    .hero-label {
      margin-top: $margin-normal;
    }
  }

  .actions:not(:first-of-type) {
    @extend %flexbox-row;
    align-items: flex-end;
  }

  .pictogram {
    margin-right: 0;
  }

  .btn,
  .hero-label,
  .button-heart {
    vertical-align: bottom;
    margin: 0 $margin-quarter;
  }
}

.tui-hero-image {
  overflow: hidden;
  z-index: 1;

  img {
    display: inline-block;
    width: 100%;
    z-index: 1;
    vertical-align: bottom;
  }
}

.full-width-image {
  video {
    &::-webkit-media-controls-start-playback-button {
      display: none;
      -webkit-appearance: none;
    }
  }
}

.tui-hero-location {
  .hero-heading {
    position: absolute;
    bottom: 0;
    z-index: 3;
    width: 100%;
    color: $color-white;
    padding: $margin-normal;

    h1 {
      text-transform: none;
      margin-bottom: $margin-half;
    }
  }

  .tui-hero-image {
    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(to bottom, rgba($color-black, 0) 50%, rgba($color-black, .4) 100%);
      z-index: 2;
    }

    img {
      z-index: 1;
    }
  }
}

.tui-hero.with-heading {
  .tui-container {
    z-index: 1;
    background: transparent;
  }

  .hero-heading {
    padding: $margin-half $margin-normal;
  }
}

@include breakpoint(sm) {
  .tui-hero {
    align-items: flex-start;
    justify-content: center;
    height: $desktop-height - $topnav-height;

    &.tui-hero-location {
      height: $desktop-height-a-b-test;
      position: relative;
      z-index: 1;
    }

    &.light {
      height: $light-height;
    }

    .btn-icon,
    .btn-favorite {
      .text {
        display: inline;
      }
    }
  }

  .button-container {
    left: 50%;
    transform: translateX(-50%);
    bottom: $margin-triple;

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

    .favourite-heart-text {
      display: none;
    }

    .btn,
    .hero-label,
    .button-heart {
      &:first-child {
        margin-left: 0;
      }

      &:last-child,
      &.btn-favorite {
        margin-right: 0;
      }
    }
  }

  .tui-hero-image {
    height: inherit;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    img {
      position: static;
      height: inherit;
    }
  }

  .image-caption {
    padding: 0;
    position: absolute;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
  }

  .tui-hero.with-heading {
    .hero-heading {
      padding: $margin-double;

      h1 {
        @include font-size(64);
      }
    }
  }
}

@include breakpoint(md) {
  .tui-hero {
    .tui-text-in-image {
      max-width: 75%;
      min-width: 25%;
    }
  }
}

@include breakpoint(lg) {
  .tui-hero {
    height: $desktop-height;
  }
}