//
// Copyright IBM Corp. 2020, 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/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/ibmdotcom-styles/scss/components/content-block-segmented';
@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;

:host(#{$c4d-prefix}-content-block-segmented) {
  ::slotted(:not([slot])) {
    display: block;
    margin-block: $spacing-10;
  }

  ::slotted(:not([slot]):last-of-type) {
    margin-block-end: 0;
  }

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

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

:host(#{$c4d-prefix}-content-block-segmented-item) ::slotted(*) {
  margin-inline: $spacing-05;
}

// TODO: Consider applying this rule in general
:host(#{$c4d-prefix}-content-block-segmented-item) {
  ::slotted(#{$c4d-prefix}-content-item-copy) {
    @include breakpoint(md) {
      inline-size: calc((100% - 2 * #{$spacing-05}) * 0.9);
    }
  }

  ::slotted([slot='footer']) {
    margin-inline: 0;
  }
}

.#{$c4d-prefix}-ce--content-layout--with-adjacent-heading-content
  ::slotted([slot='heading']) {
  // In this condition, given the heading content and child content are in different grid area, both margins will be in effect.
  // Uses the margin of child content and cancels one of the heading to get the right margin.
  margin-block-end: 0;
}