/**
 * Copyright IBM Corp. 2016, 2023
 *
 * 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 '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../internal/content-block';
@use '../../internal/content-group';
@use '../../internal/content-item/content-item';
@use '../image';

@mixin content-block-segmented {
  :host(#{$c4d-prefix}-content-block-segmented),
  .#{$prefix}--content-block-segmented {
    .#{$prefix}--row {
      &.#{$prefix}--layout--border {
        @include breakpoint(lg) {
          padding-block-end: $spacing-13;
        }

        .#{$prefix}--content-block__cta-row {
          margin-block-end: 0;
        }

        .#{$prefix}--layout-2-3 {
          padding-inline-start: 0;
        }
      }
    }

    .#{$prefix}--content-group__cta-row {
      @include breakpoint-down(md) {
        margin-inline-start: 0;
      }
    }

    .#{$prefix}--content-block__cta-row {
      margin-block-end: $spacing-07;
      @include breakpoint(lg) {
        margin-block-end: $spacing-13;
      }
    }
  }

  // React specific classes to manage bottom spacing
  .#{$prefix}--content-block-segmented {
    &-border {
      .#{$prefix}--content-block {
        padding-block-end: 0;
      }
    }

    .#{$prefix}--content-block__cta-row {
      margin-block-end: 0;

      &-border {
        margin-block-end: $spacing-07;
        @include breakpoint(lg) {
          margin-block-end: $spacing-13;
        }
      }
    }
  }

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

  :host(#{$c4d-prefix}-content-block-segmented)
    .#{$prefix}--content-block__children
    .#{$prefix}--content-block-segmented__media
    ::slotted(:not([slot]):last-of-type) {
    margin-block-end: 0;
  }

  .#{$prefix}--content-block-segmented .#{$prefix}--content-group {
    display: block;
    margin-block: $spacing-10;

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