//
// 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/spacing' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '@carbon/ibmdotcom-styles/scss/components/content-block-simple';
@use '@carbon/ibmdotcom-styles/scss/components/image';
@use '@carbon/ibmdotcom-styles/scss/components/video-player';
@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;

:host(#{$c4d-prefix}-content-block-simple) {
  display: block;

  ::slotted(#{$c4d-prefix}-content-block-complementary) {
    @include breakpoint-down(lg) {
      margin: $spacing-10 0;
    }
  }

  ::slotted(#{$c4d-prefix}-card-cta[slot]),
  ::slotted(#{$c4d-prefix}-card-link-cta[slot]) {
    inline-size: auto;
  }

  ::slotted(#{$c4d-prefix}-card-cta),
  ::slotted(#{$c4d-prefix}-card-link-cta) {
    inline-size: auto;
    max-inline-size: 320px;
  }

  ::slotted([slot='media']) {
    max-inline-size: to-rem(640px);
  }

  .#{$c4d-prefix}--content-block-footer {
    margin-block-start: $spacing-07;
  }

  ::slotted(#{$c4d-prefix}-card) {
    @include breakpoint('md') {
      margin-inline-start: -$spacing-05;
    }
  }

  /* TOC template (anything that's not FW) */
  &:not(.cds--content-block--full-width-template) {
    ::slotted(#{$c4d-prefix}-card[slot='footer']) {
      /* sm and down */
      @include breakpoint-down(md) {
        inline-size: 100%;
        max-inline-size: 100%;
      }

      /* md and larger */
      @include breakpoint('md') {
        inline-size: calc(50% + 1rem);
        max-inline-size: 100vw;
      }
    }
  }
}

:host(
    #{$c4d-prefix}-content-block-simple.cds--content-block--full-width-template
  ) {
  ::slotted(#{$c4d-prefix}-card[slot='footer']) {
    /* default for lg, xlg, max */
    inline-size: 34%;

    /* sm and down */
    @include breakpoint-down(md) {
      inline-size: 100%;
      max-inline-size: 100%;
    }

    /* md only */
    @media (width >= 672px) and (width <= 1055.98px) {
      inline-size: calc(50% + 1rem);
      max-inline-size: 100vw;
    }
  }
}