@use 'sass:map';
@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/mixins' as *;
@use '../../sass/shared/videomodal';

#{$component-prefix}text-and-image {
  $p: &;
  overflow: hidden !important;
  position: relative;
  flex-direction: row;
  // Prevent images to rezise
  flex-grow: 0;
  flex-shrink: 0;

  @include media-breakpoint-up(md) {
    @include flexbox;
  }

  /*
  Modifiers
  */

  &--image-left,
  &--image-right {
    .c-banner {
      min-height: initial !important;
      height: 100% !important;

      div {
        height: 100% !important;
      }
    }
  }

  @include media-breakpoint-up(md) {
    &--image-left {
      flex-direction: row;
      #{$p}__image--padding {
        padding: 1rem 0 1rem 1rem;
      }
    }

    &--image-right {
      flex-direction: row-reverse;
      #{$p}__image--padding {
        padding: 1rem 1rem 1rem 0;
      }
    }

    &--image-top {
      flex-direction: column;
      #{$p}__image--padding {
        padding: 1rem 1rem 0 1rem;
      }
    }

    &--image-bottom {
      flex-direction: column-reverse;
      #{$p}__image--padding {
        padding: 0 1rem 1rem 1rem;
      }
    }
  }
  // mobile will always be image top
  @include media-breakpoint-down(lg) {
    #{$p}__image--padding {
      padding: 1rem 1rem 0 1rem;
    }
  }

  &--image-top,
  &--image-bottom {
    height: 100%;

    #{$p} {
      &__text,
      &__text-inner,
      &__image {
        width: 100%;
      }
    }
  }

  &__text {
    overflow: auto;

    @include media-breakpoint-up(md) {
      display: flex !important;
      align-self: stretch;
    }
  }

  // Vertical align middle/center
  &__text--vertical-align-center &__text-inner {
    align-self: center;
  }

  &__text-inner {
    max-width: 100%;
    height: 100%;

    @include media-breakpoint-up(md) {
      display: flex !important;
      flex-direction: column;
      width: calc(map.get($container-max-widths, xl) / 2);
    }

    &--padding {
      padding: 2.5rem 2rem 2rem 2rem;

      @include media-breakpoint-up(md) {
        padding: 5rem 5rem 5rem 4rem;
      }
    }
  }

  &__image {
    display: block;
    text-align: center;
    height: auto; // To prevent layout shifting on rendering

    @include media-breakpoint-up(md) {
      width: 50%; // default img width
      object-fit: cover;

      &--width-half {
        width: 50%;
      }

      &--width-one-third {
        width: 33.3%;
      }

      &--width-one-fourth {
        width: 25%;
      }

      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        height: 100%;
        align-self: center;
      }
    }

    &--dark-overlay {
      &:after {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1;
      }
    }

    &--video {
      position: relative;
      overflow: hidden;

      &:before {
        padding-bottom: 56.25%;
        content: '';
        display: block;
      }

      &:after {
        position: absolute;
        content: '';
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 1;
      }

      iframe,
      video,
      .youtube-video,
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
  }

  &__video-modal-trigger {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  &__video-modal-trigger-icon::after {
    @include unity-symbols('play-circle', 3rem);
    color: $white;
    text-shadow: 0 0 rgba(0, 0, 0, 0.25);
  }

  /*
  Customization for buttons
  */
  #{$object-prefix}button {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;

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