/**
 * 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 '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/type' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/utils/content-width' as *;
@use '../../globals/utils/hang' as *;

@mixin themed-items {
  :host(#{$c4d-prefix}-content-group-heading),
  .#{$prefix}--content-group__title {
    color: $text-primary;
  }
}
@mixin content-group {
  :host(#{$c4d-prefix}-content-group) ::slotted(:not([slot])) {
    margin-inline: $spacing-05;
  }

  :host(#{$c4d-prefix}-content-group),
  :host(#{$c4d-prefix}-content-group-simple),
  :host(#{$c4d-prefix}-content-group-cards),
  :host(#{$c4d-prefix}-content-group-pictograms),
  .#{$prefix}--content-group {
    display: block;
    margin-block-end: $spacing-07;

    @include breakpoint(md) {
      margin-block-end: $spacing-09;
    }

    &:only-of-type {
      margin-block-end: 0;
    }

    &:last-of-type {
      margin-block-end: 0;
    }

    .#{$prefix}--card__CTA {
      // TO DO: aspect ratio 2x1
      @include breakpoint(md) {
        @include hang;
      }
    }
  }

  :host(#{$c4d-prefix}-content-group-heading),
  .#{$prefix}--content-group__title {
    @include type-style('fluid-heading-04', true);

    display: block;
    margin-block-end: $spacing-07;

    ::slotted(h3) {
      // stylelint-disable-next-line declaration-no-important
      font-size: inherit !important;
    }
  }

  :host(#{$c4d-prefix}-content-group-heading),
  :host(#{$c4d-prefix}-content-group-copy),
  .#{$prefix}--content-group__title,
  .#{$prefix}--content-group__copy {
    @include content-width;
  }

  :host(#{$c4d-prefix}-content-group-copy),
  .#{$prefix}--content-group__copy {
    margin-block-end: $layout-03;
  }

  :host(#{$c4d-prefix}-content-group)
    ::slotted([slot='footer']:not(#{$c4d-prefix}-card)) {
    padding-inline-start: $spacing-05;
  }

  .#{$prefix}--content-group__cta-row {
    @include make-row;

    // allows for margin collapsing
    display: block;

    // FIXME: CardLink is being used as Card in React, need to separate this
    .#{$prefix}--card__CTA.#{$prefix}--card-link .#{$prefix}--card__heading {
      @include type-style('heading-02', true);
    }
  }
}