/**
 * @license
 *
 * Copyright IBM Corp. 2020, 2025
 *
 * 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/styles/scss/utilities/convert' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../card-group/card-group';

@mixin card-section-offset {
  :host(#{$c4d-prefix}-card-section-offset) {
    position: relative;
    display: block;

    /* stylelint-disable-next-line property-no-unknown */
    aspect-ratio: 16 / 9;
    block-size: 100%;
    inline-size: 100%;

    ::slotted(#{$c4d-prefix}-background-media) {
      /* stylelint-disable-next-line property-no-unknown */
      aspect-ratio: 4 / 3;
      block-size: auto;
    }

    /* remove when the `mobile-position` attribute is removed */
    #{$c4d-prefix}-background-media {
      /* stylelint-disable-next-line property-no-unknown */
      aspect-ratio: 4 / 3;
      block-size: auto;
    }

    @include breakpoint(md) {
      ::slotted(#{$c4d-prefix}-background-media) {
        position: absolute;

        /* stylelint-disable-next-line property-no-unknown */
        aspect-ratio: auto;
        block-size: 100%;
        inline-size: 100%;
        inset-block-start: 0;
      }

      /* remove when the `mobile-position` attribute is removed */
      #{$c4d-prefix}-background-media {
        position: absolute;

        /* stylelint-disable-next-line property-no-unknown */
        aspect-ratio: auto;
        block-size: 100%;
        inline-size: 100%;
      }
    }

    @include breakpoint(lg) {
      display: flex;
    }

    ::slotted(:not(#{$c4d-prefix}-background-media)) {
      z-index: 1;
    }

    ::slotted([slot='action']) {
      inline-size: 90%;
      max-inline-size: to-rem(640px);

      @include breakpoint(md) {
        inline-size: calc(100% - $spacing-07);
      }
    }

    .#{$prefix}--card-section-offset__content {
      position: relative;
      z-index: 1;
      padding: $spacing-07 0 $spacing-10 $spacing-05;
      inline-size: 100%;

      @include breakpoint(lg) {
        padding-block-end: 0;
      }
    }

    ::slotted([slot='card-group']) {
      position: relative;
      z-index: 1;
      inline-size: 100%;

      inset-block-start: -1px;
      inset-inline-start: -1px;
      margin-block-start: auto;
      padding-block-start: 0;

      @include breakpoint(lg) {
        padding-block-start: $spacing-07;
      }
    }
  }

  :host(:dir(rtl)) {
    ::slotted([slot='heading']) {
      margin-right: 1rem;
    }

    ::slotted([slot='action']) {
      //important needed because <a slot="action" style="display: contents;"> in AEM has an inline style
      /* stylelint-disable declaration-no-important */
      display: block !important;
      margin-right: 1rem !important;
    }
  }

  // Print styles
  @media print {
    .#{$prefix}--card-section-offset__content,
    :host(#{$c4d-prefix}-card-section-offset) {
      flex-wrap: wrap;

      /* stylelint-disable-next-line property-no-unknown */
      aspect-ratio: auto;
      background-color: $background;

      #{$c4d-prefix}-background-media {
        display: none;
      }

      .#{$prefix}--card-section-offset__content {
        max-inline-size: 640px;
      }

      ::slotted([slot='heading']) {
        // @include type-style('fluid-heading-05');
        color: $layer-01;
        margin-block-end: $spacing-03;
      }

      ::slotted([slot='card-group']) {
        margin-block-start: 0;
      }
    }
  }
}