/**
 * Copyright IBM Corp. 2016, 2024
 *
 * 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 'sass:math';

@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/utilities' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/components/modal' as *;

/// Expressive modal
/// @access private
/// @group expressive-modal

@mixin expressive-modal {
  $modal: '.#{$prefix}--modal';
  $icon-size: to-rem(20px);

  :host(#{$c4d-prefix}-expressive-modal) {
    @extend .#{$prefix}--modal !optional;

    .#{$prefix}--modal-container {
      padding: $spacing-05;
      grid-template-rows: 1fr;
      min-block-size: $spacing-10 + $icon-size;

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

    .#{$prefix}--modal-content {
      display: grid;
      grid-template-rows: auto 1fr auto;
      padding-block-end: 0;
    }

    .#{$c4d-prefix}-ce--modal__header--with-body {
      margin-block-end: $spacing-05;
    }

    .#{$c4d-prefix}-ce--modal__body {
      inline-size: 100%;
    }

    .#{$c4d-prefix}-ce--modal__body--with-footer {
      margin-block-end: $spacing-09;
    }
  }

  :host(#{$c4d-prefix}-expressive-modal[open]) {
    @extend .#{$prefix}--modal !optional;

    opacity: 1;
    transition: opacity $duration-moderate-02 motion(entrance, expressive),
      visibility 0ms linear;
    visibility: inherit;

    .#{$prefix}--modal-container {
      transform: translate3d(0, 0, 0);
      transition: transform $duration-moderate-02 motion(entrance, expressive);
    }

    @media screen and (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  :host(#{$c4d-prefix}-expressive-modal-footer) .#{$prefix}--modal-footer {
    justify-content: flex-start;
    block-size: $spacing-09;
  }

  :host(#{$c4d-prefix}-expressive-modal-close-button) {
    @extend .#{$prefix}--modal-close-button !optional;

    .#{$prefix}--modal-close {
      position: fixed;
      z-index: 2;
      inset-block-start: 0;
      inset-inline-end: 0;
    }
  }

  :host(#{$c4d-prefix}-expressive-modal-heading),
  .#{$prefix}--modal--expressive .#{$prefix}--modal-content h1 {
    @include type-style('heading-04');
  }

  :host(#{$c4d-prefix}-expressive-modal-header) {
    display: block;
    padding: 0;
  }

  :host(#{$c4d-prefix}-expressive-modal-body),
  :host(#{$c4d-prefix}-lightbox-media-viewer-body) {
    @include type-style('body-02');
  }

  :host(#{$c4d-prefix}-expressive-modal)[expressive-size='full-width'],
  .#{$prefix}--modal--expressive--fullwidth {
    @include breakpoint(md) {
      .#{$prefix}--modal-container {
        block-size: calc(100% - #{$spacing-07});
        inline-size: calc(100% - #{$spacing-07});
        max-block-size: none;
        max-inline-size: 96rem;
      }
    }
  }

  :host(#{$c4d-prefix}-expressive-modal)[expressive-size='full-width'] {
    .#{$prefix}--modal-container {
      padding: 0;
    }

    .#{$prefix}--modal-content {
      padding: $spacing-05;

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

  :host(#{$c4d-prefix}-expressive-modal[size='full-width'])
    ::slotted(#{$c4d-prefix}-expressive-modal-body),
  :host(#{$c4d-prefix}-expressive-modal[size='full-width'])
    ::slotted(#{$c4d-prefix}-lightbox-media-viewer-body),
  .#{$prefix}--modal--expressive--fullwidth .#{$prefix}--modal-content {
    block-size: auto;
    min-block-size: to-rem(500px);
    padding-inline-end: 0;
  }
}