@use '../../sass/abstracts' as *;

@mixin heights() {
  &--height-16-9 {
    position: relative;
    height: 0 !important;
    min-height: initial !important;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    #{$component-prefix}banner__image {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
    }

    #{$component-prefix}banner__text,
    .container-fluid {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  &--height-pixels-200 {
    @include media-breakpoint-up(md) {
      min-height: 200px;
    }
  }

  &--height-pixels-250 {
    @include media-breakpoint-up(md) {
      min-height: 250px;
    }
  }

  &--height-pixels-300 {
    @include media-breakpoint-up(md) {
      min-height: 300px;
    }
  }

  &--height-pixels-350 {
    @include media-breakpoint-up(md) {
      min-height: 350px;
    }
  }

  &--height-pixels-400 {
    @include media-breakpoint-up(md) {
      min-height: 400px;
    }
  }

  &--height-pixels-450 {
    @include media-breakpoint-up(md) {
      min-height: 450px;
    }
  }

  &--height-pixels-500 {
    @include media-breakpoint-up(md) {
      min-height: 500px;
    }
  }

  &--height-pixels-550 {
    @include media-breakpoint-up(md) {
      min-height: 550px;
    }
  }

  &--height-percent-25 {
    @include media-breakpoint-up(md) {
      min-height: 25vh;
    }
  }

  &--height-percent-50 {
    @include media-breakpoint-up(md) {
      min-height: 50vh;
    }
  }

  &--height-percent-75 {
    @include media-breakpoint-up(md) {
      min-height: 75vhvh;
    }
  }

  &--height-percent-100 {
    min-height: 100vh; // Even in mobile
    min-height: calc(100vh - 4.375rem);
  }
}

#{$component-prefix}banner {
  .container,
  .container-fluid {
    min-height: inherit;
    align-self: center;

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      /* IE10+ CSS styles go here */
      height: 1px;
      vertical-align: middle;
    }

    #{$component-prefix}banner__text {
      padding: 1rem 0;
    }
  }
}

#{$component-prefix}banner {
  min-height: 300px; // Mobile standard
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden !important;
  height: 100%;
  width: 100%;
  max-height: 550px;
  align-items: center;
  @include flexbox;

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    // display: table !important;
    min-height: inherit;
    vertical-align: middle;
  }

  @include media-breakpoint-up(md) {
    min-height: 550px; // Standard desktop
  }

  @include heights();

  &__overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;

    &--dark {
      background: rgba(0, 0, 0, 0.4);
    }

    &--light {
      background: rgba(255, 255, 255, 0.4);
    }

    &--dark-to-transparent {
      background: rgb(0, 0, 0);
      background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(255, 255, 255, 0) 100%
      );
    }

    &--transparent-to-dark {
      background: rgb(0, 0, 0);
      background: linear-gradient(
        -90deg,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(255, 255, 255, 0) 100%
      );
    }

    &--light-to-transparent {
      background: rgb(255, 255, 255);
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 100%
      );
    }

    &--transparent-to-light {
      background: rgb(255, 255, 255);
      background: linear-gradient(
        -90deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  }

  &__text {
    @include body-large;
    align-self: center;
    position: relative;
    z-index: 5;
    padding: 1rem 0;
    width: 100%;
    @include flexbox;
    flex-direction: column;

    h1,
    h2 {
      @include display-large;

      @include media-breakpoint-up(md) {
        @include display-x-large;
      }
    }

    p {
      @include body-large;
    }

    &--color-white {
      color: $white;

      a:not(#{$object-prefix}button),
      p {
        color: $white !important;
      }
    }

    &--color-black {
      color: $sodra-black;

      a:not(#{$object-prefix}button) {
        color: $sodra-black !important;
      }
    }

    &--right {
      justify-content: flex-end;
      margin-left: auto;
    }

    &--center {
      margin: auto;
      justify-content: center;
    }

    &--vertical-align-top {
      margin-top: 0;
      margin-bottom: auto;
    }

    &--vertical-align-bottom {
      margin-bottom: 0;
      margin-top: auto;
    }

    &--vertical-align-center {
      margin-bottom: auto;
      margin-top: auto;
    }

    &--width-small {
      width: 43.75rem;
      max-width: 100%;
    }

    &--width-one-third {
      @include media-breakpoint-up(md) {
        width: 33.333%;
      }
    }

    &--width-half {
      @include media-breakpoint-up(md) {
        width: 50%;
      }
    }

    &--width-two-third {
      @include media-breakpoint-up(md) {
        width: 66.666%;
      }
    }

    &--width-full {
      @include media-breakpoint-up(md) {
        width: 100%;
      }
    }
  }

  &__image {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    right: 50%;
    transform: translate(50%, 0px);
    max-width: none !important;
    min-height: 100%;
    object-fit: cover;
  }

  picture#{$component-prefix}banner__image {
    width: 100%;

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  &__background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
    height: auto;
  }

  &__video-modal {
    cursor: pointer;

    &__icon {
      &::before {
        @include unity-symbols('play-circle', 1.5rem);
        margin-right: 0.5rem;
        vertical-align: top;
      }
    }
  }

  .video-background {
    background: #000;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    top: 0;
    left: 0;
  }

  .video-foreground,
  .video-background iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /*
  Customization for buttons
  */
  #{$object-prefix}button {
    margin-right: 0.5rem;
    @include media-breakpoint-down(lg) {
      margin-bottom: 0.5rem;
    }

    @include media-breakpoint-down(sm) {
      width: 100%;
      text-align: center;
    }
  }
}