/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/ibmdotcom-styles/scss/components/video-player';
@use '../expressive-modal/expressive-modal';
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../expressive-modal' as *;
@use '../video-player' as *;

@mixin lightbox-media-viewer {
  :host(#{$c4d-prefix}-lightbox-image-viewer),
  :host(#{$c4d-prefix}-lightbox-video-player) {
    @extend :host(#{$c4d-prefix}-expressive-modal-body);
    @extend .#{$c4d-prefix}--lightbox-media-viewer;
  }

  :host(#{$c4d-prefix}-lightbox-video-player-container),
  :host(#{$c4d-prefix}-lightbox-video-player-composite) {
    display: contents;
  }

  :host(#{$c4d-prefix}-lightbox-video-player) .#{$c4d-prefix}--video-player {
    inline-size: 100%;

    ::slotted(.#{$c4d-prefix}--video-player__video) {
      position: absolute;
      inset: 0;
    }
  }

  .#{$c4d-prefix}--modal--expressive--fullwidth
    .#{$c4d-prefix}--modal-container
    .#{$c4d-prefix}--modal-content {
    min-block-size: 100%;
  }

  .#{$c4d-prefix}--lightbox-media-viewer {
    color: $text-primary;

    .#{$prefix}--modal-container {
      @include breakpoint-down(md) {
        padding: 0 $spacing-05;
      }
      .#{$prefix}--modal-content {
        padding-inline-end: 0;
      }
    }

    .#{$c4d-prefix}--video-player {
      inline-size: 100%;
      .#{$c4d-prefix}--video-player__video-container {
        /* stylelint-disable-next-line function-name-case */
        padding-block-start: Min(calc(100vh - #{$spacing-13}), 56.25%);
      }
    }

    @include breakpoint(md) {
      .#{$prefix}--model-container {
        padding-block: $spacing-10 0;
      }
    }

    @include breakpoint(lg) {
      .#{$prefix}--model-container {
        padding-block: $spacing-09 $spacing-05;
      }
    }
  }

  :host(#{$c4d-prefix}-lightbox-media-viewer-body),
  .#{$c4d-prefix}--lightbox-media-viewer__container {
    display: block;
    block-size: 100%;
    inline-size: 100%;
    overflow-y: auto;

    &::before,
    &::after {
      position: sticky;
      z-index: 1;
      display: block;
      flex: 0 0 auto;
      block-size: $spacing-07;
      content: '';
      inline-size: 100%;
      padding-block-start: 0;
    }

    &::before {
      background: linear-gradient(to bottom, $layer-01, transparent);
      inset-block-start: 0;
    }

    &::after {
      background: linear-gradient(to top, $layer-01, transparent);
      inset-block-end: 0;
    }

    @include breakpoint(md) {
      padding-inline: $spacing-05;
    }

    @include breakpoint(lg) {
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    .#{$c4d-prefix}--lightbox-media-viewer__row {
      @include make-row(0);

      flex-flow: column nowrap;

      inline-size: 100%;
      // Padding top needs to account for the scroll gradient overlay
      padding-block-start: calc(#{$spacing-09} - #{$spacing-07});

      @include breakpoint(lg) {
        flex-direction: row;
        padding-block-start: 0;
      }
    }

    .#{$c4d-prefix}--lightbox-media-viewer__media,
    .#{$c4d-prefix}--lightbox-media-viewer__media-description {
      box-sizing: border-box;
    }

    .#{$c4d-prefix}--lightbox-media-viewer__media {
      @include breakpoint-down(lg) {
        position: relative;
      }

      img {
        block-size: auto;
        inline-size: auto;
        max-block-size: 100%;
        max-inline-size: 100%;
      }

      @include breakpoint-down(lg) {
        display: flex;
        align-items: center;
      }

      @include breakpoint(lg) {
        @include make-col-ready;
        @include make-col(12, 16);

        flex: none;
        /* stylelint-disable-next-line property-no-unknown */
        aspect-ratio: 16 / 9;

        inline-size: 100%;

        .#{$c4d-prefix}--image {
          block-size: 100%;
        }
      }
    }

    .#{$c4d-prefix}--lightbox-media-viewer__media-description {
      position: relative;
      display: flex;
      flex-direction: column;

      @include breakpoint(lg) {
        @include make-col-ready;
        @include make-col(4, 16);

        margin-inline-start: auto;
      }

      @include breakpoint-down(lg) {
        flex-grow: 1;
      }
    }

    .#{$c4d-prefix}--lightbox-media-viewer__content {
      padding-inline-end: $spacing-07;

      @include type-style('body-02');
      @include breakpoint(lg) {
        overflow: auto;
      }
    }

    .#{$c4d-prefix}--lightbox-media-viewer__content__title {
      padding-block-end: $spacing-07;

      @include type-style('fluid-heading-03', true);
      @include breakpoint-down(lg) {
        padding-block-start: $spacing-05;
      }
    }

    .#{$c4d-prefix}--lightbox-media-viewer__content__desc {
      color: $text-secondary;
      padding-block-end: $spacing-07;

      @include type-style('body-02');
    }

    .#{$c4d-prefix}--lightbox-media-viewer__title,
    .#{$c4d-prefix}--lightbox-media-viewer__desc {
      @include breakpoint(lg) {
        display: flex;
        block-size: 100%;
        max-inline-size: 95%;
      }
    }
  }

  ::slotted(#{$c4d-prefix}-video-player-container-v7) {
    inline-size: 100%;
  }
}