/**
 * 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/theme' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/utilities' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '../../globals/vars' as *;
@use '../../globals/utils/content-width' as *;
@use '../../components/list/list';
@use '../../components/link-with-icon';
@use '../../components/button-group';

@mixin content-item {
  :host(#{$c4d-prefix}-content-item) {
    display: block;
    margin-block-end: $spacing-07;
    max-inline-size: to-rem(640px);

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

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

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

    .#{$c4d-prefix}--content-item__horizontal {
      @include breakpoint(md) {
        display: flex;
      }
      .#{$c4d-prefix}--content-item__media {
        margin-inline-end: $spacing-07;
      }
    }

    .#{$c4d-prefix}--content-item__statitics {
      @include type-style('fluid-display-01', true);

      margin-block-end: $spacing-05;
    }

    .#{$c4d-prefix}--content-item__media {
      margin-block-end: $spacing-05;
    }

    ::slotted(#{$c4d-prefix}-image-logo) {
      margin: 0;
      /* stylelint-disable */
      aspect-ratio: var(--logo-ratio);
      /* stylelint-enable */
      margin-block-end: $spacing-06;
    }

    ::slotted(svg) {
      block-size: $spacing-10;
      inline-size: $spacing-10;
    }
  }

  :host(#{$c4d-prefix}-content-item)
    ::slotted(#{$c4d-prefix}-video-player-container) {
    margin-block: $spacing-05;
    margin-block-end: $spacing-07;
    max-inline-size: 40rem;
  }

  :host(#{$c4d-prefix}-content-item-heading),
  :host(#{$c4d-prefix}-content-item-copy),
  :host(#{$c4d-prefix}-content-item-paragraph) {
    display: block;
  }

  :host(#{$c4d-prefix}-content-item-copy) {
    @include breakpoint(md) {
      @include content-width;
    }
  }

  :host(#{$c4d-prefix}-content-item-heading) {
    @include type-style('heading-02');

    color: $text-primary;
  }

  :host(#{$c4d-prefix}-content-item-paragraph) {
    @include type-style('body-02');

    color: $text-primary;
    margin-block-end: $spacing-05;
  }

  :host(#{$c4d-prefix}-content-item-copy:not([has-cta])) {
    ::slotted(#{$c4d-prefix}-content-item-paragraph) {
      margin-block-end: 0;
    }
  }

  :host(#{$c4d-prefix}-content-item[horizontal])
    ::slotted(#{$c4d-prefix}-image) {
    inline-size: 100%;
    @include breakpoint(md) {
      inline-size: to-rem(128px);
    }
  }

  :host(#{$c4d-prefix}-content-item) ::slotted([slot='footer']) {
    margin-inline-start: 0;
  }
}