/**
 * 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 '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/themes' as *;
@use '@carbon/styles/scss/type' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;

@mixin content-section-themed-items {
  background: $background;
  color: $text-primary;
}

@mixin content-section {
  :host(#{$c4d-prefix}-link-list-section),
  .#{$prefix}--content-section {
    padding-block: $spacing-09 $spacing-10;
  }

  .#{$prefix}--content-section-layout {
    @include breakpoint(lg) {
      display: flex;
    }
  }

  .#{$prefix}--content-section__leading {
    padding: $spacing-05;
    padding-block-start: 0;

    @include breakpoint-down(lg) {
      padding-block-end: $spacing-07;
    }

    @include breakpoint(lg) {
      @include make-col(4, 16);
    }
  }

  .#{$prefix}--content-section__body {
    @include breakpoint-down(md) {
      // TODO: `display:block` or `display:flex` here causes broken carousel if `<cds-carousel>` is slotted in as the child,
      // especially if the carousel containts large number of cards.
      // May need to investigate.
      display: contents;
    }
  }

  .#{$prefix}--content-section__grid,
  :host(#{$c4d-prefix}-cta-section) {
    @include make-container;
  }

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

  .#{$prefix}--content-section__left,
  .#{$prefix}--content-section__children {
    @include make-col-ready;
  }

  .#{$prefix}--content-section__left {
    @include breakpoint(lg) {
      @include make-col(4, 16);

      padding-block-start: $spacing-05;
    }
  }

  :host(#{$c4d-prefix}-content-section-heading),
  .#{$prefix}--content-section__heading {
    color: $text-primary;
    margin-block: 0;

    @include type-style('heading-02');
  }

  :host(#{$c4d-prefix}-content-section-copy),
  .#{$prefix}--content-section__copy p {
    @include type-style('body-compact-02');

    color: $text-secondary;

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

  :host(#{$c4d-prefix}-content-section-heading),
  .#{$prefix}--content-section__heading,
  :host(#{$c4d-prefix}-content-section-copy),
  .#{$prefix}--content-section__copy p,
  :host(#{$c4d-prefix}-content-section) ::slotted([slot='footer']),
  .#{$prefix}--content-section__cta {
    @include breakpoint(md) {
      padding-inline-end: $spacing-07;
    }
  }

  .#{$prefix}--content-section__children {
    margin-block-start: $spacing-06;

    @include breakpoint(lg) {
      @include make-col(12, 16);

      margin-block-start: 0;
    }
  }

  .#{$prefix}--content-section__children > :first-child {
    .#{$prefix}--content-block,
    .#{$prefix}--content-group {
      margin-block-start: 0;
      padding-block-start: 0;
    }
  }

  .#{$prefix}--content-section__body ::slotted(*:first-of-type) {
    margin-block-start: 0;
    padding-block-start: 0;
  }

  .#{$prefix}--content-section--g10 {
    @include theme($g10, feature-flag-enabled('enable-css-custom-properties'));
    @include content-section-themed-items;
  }

  .#{$prefix}--content-section--g90 {
    @include theme($g90, feature-flag-enabled('enable-css-custom-properties'));
    @include content-section-themed-items;
  }

  .#{$prefix}--content-section--g100 {
    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
    @include content-section-themed-items;
  }
}