/**
 * 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/convert' as *;
@use '../../globals/vars' as *;
@use '../../globals/utils/content-width' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/utils/hang' as *;

@mixin content-block {
  :host(#{$c4d-prefix}-content-block),
  :host(#{$c4d-prefix}-content-block-simple),
  :host(#{$c4d-prefix}-content-block-media),
  :host(#{$c4d-prefix}-content-block-mixed),
  :host(#{$c4d-prefix}-content-block-horizontal),
  :host(#{$c4d-prefix}-leadspace-block-content),
  :host(#{$c4d-prefix}-leadspace-with-search-content),
  :host(#{$c4d-prefix}-content-block-segmented),
  :host(#{$c4d-prefix}-content-block-headlines),
  .#{$prefix}--content-block {
    display: block;
    margin-block: $spacing-07;
    margin-block-end: $spacing-12;

    @include breakpoint('lg') {
      margin-block: $spacing-10;
      margin-block-end: $spacing-13;
    }

    &[complementary-style-scheme='with-border'] {
      margin-block-end: $spacing-07;
      @include breakpoint('lg') {
        margin-block-end: $spacing-10;
      }
    }

    @include breakpoint(lg) {
      .#{$prefix}--link-list {
        &:first-of-type {
          padding-block-start: 0;
        }
      }
    }
  }

  .#{$prefix}--content-layout {
    display: grid;

    grid-template:
      'heading' auto
      'body' auto
      'footer' auto / 1fr;

    @include breakpoint(md) {
      grid-template:
        'heading heading' auto
        'body body' auto
        'footer .' auto / 1fr 1fr;
    }

    &.#{$prefix}--layout--border {
      margin-inline: 0;
      margin-inline-end: 0;
      padding-block-end: $spacing-10;
      padding-inline: 0;
      padding-inline-end: 0;

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

    ::slotted([slot='heading']),
    ::slotted([slot='copy']),
    ::slotted(*:not([slot])) {
      margin-inline-start: $spacing-05;
    }

    ::slotted(#{$c4d-prefix}-content-group:not([slot])),
    ::slotted(#{$c4d-prefix}-cta-block-item-row:not([slot])),
    ::slotted(#{$c4d-prefix}-content-group-cards-item:not([slot])),
    ::slotted([data-autoid^='c4d--tabs-']:not([slot])),
    ::slotted([data-autoid^='c4d--card']:not([slot])) {
      margin-inline-start: 0;
    }

    &__aside,
    ::slotted([slot='complementary']) {
      grid-area: complementary;
    }

    ::slotted(#{$c4d-prefix}-card[slot='footer']) {
      @include make-col(4, 4);

      @include breakpoint(md) {
        @include make-col(4, 8);
      }

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

    ::slotted([slot='footer']:not(#{$c4d-prefix}-card)) {
      padding-inline-start: $spacing-05;
    }

    ::slotted([slot='heading']) {
      grid-area: heading;
    }

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

    ::slotted(#{$c4d-prefix}-video-player-container) {
      // Ensures the margin gets effective
      display: block;
    }
  }

  .#{$prefix}--content-layout--with-complementary {
    grid-template:
      'heading' auto
      'body' auto
      'footer' auto
      'complementary' auto / 1fr;

    @include breakpoint(md) {
      grid-template:
        'heading heading' auto
        'body body' auto
        'footer .' auto
        'complementary complementary' auto / 1fr 1fr;
    }

    @include breakpoint(lg) {
      grid-template-areas:
        'heading heading heading heading heading heading heading heading . . . .'
        'body body body body body body body body . complementary complementary complementary'
        'footer footer footer footer footer footer footer footer . complementary complementary complementary';
      grid-template-columns: repeat(12, 1fr);
    }

    ::slotted(#{$c4d-prefix}-card[slot='footer']) {
      @include make-col(4, 4);

      @include breakpoint(md) {
        @include make-col(4, 8);
      }
    }

    ::slotted([slot='complementary']) {
      margin-inline: $spacing-05;
    }
  }

  .#{$prefix}--content-layout--with-complementary.#{$prefix}--content-layout--with-footer {
    @include breakpoint-down(lg) {
      ::slotted([slot='complementary']) {
        padding-block-start: $spacing-07;
      }
    }
  }

  .#{$prefix}--content-layout--with-children
    .#{$c4d-prefix}--content-block-footer {
    padding-block-start: $spacing-07;
  }

  .#{$prefix}--content-layout__body {
    display: grid;
    grid-area: body;

    .bx--content-group-cards__row {
      margin-inline: 0;
    }
  }

  :host(#{$c4d-prefix}-content-block-horizontal) #{$c4d-prefix}-hr {
    margin: 0;
    margin-block-start: $layout-03;

    @include breakpoint(md) {
      margin-block-start: 0;
    }
    @include breakpoint(lg) {
      margin-block-start: $layout-05;
    }
  }

  .#{$prefix}--content-block .#{$prefix}--hr {
    margin-block-start: $layout-03;

    @include hang;
    @include breakpoint(md) {
      margin-block-start: $layout-01;
    }
    @include breakpoint(lg) {
      margin-block-start: calc(#{$layout-04} + #{$spacing-03});
    }
  }

  :host(#{$c4d-prefix}-content-block-heading),
  :host(#{$c4d-prefix}-content-block-copy),
  :host(#{$c4d-prefix}-callout-with-media-copy),
  .#{$prefix}--content-block__heading,
  .#{$prefix}--content-block__copy {
    max-inline-size: to-rem(640px);
  }

  :host(#{$c4d-prefix}-content-block-heading),
  .#{$prefix}--content-block__heading {
    @include type-style('fluid-heading-05', true);

    color: $text-primary;

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

  :host(#{$c4d-prefix}-content-block-paragraph),
  .#{$prefix}--content-block__copy p {
    @include type-style('fluid-heading-03', true);

    color: $text-primary;

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

  .#{$prefix}--content-block__cta {
    margin-block-start: $spacing-09;
    @include breakpoint(md) {
      margin-block-start: $spacing-10;
    }

    .#{$prefix}--feature-card {
      @include make-row;
    }

    // FIXME: CardLink is being used as Card in React, need to separate this
    .#{$prefix}--card__CTA.#{$prefix}--card-link .#{$prefix}--card__heading {
      @include type-style('heading-02', true);
    }
  }

  .#{$prefix}--content-block__cta-row {
    @include make-row;
    // allows for margin collapsing
    display: block;
  }

  .#{$prefix}--content-block__cta-col {
    @include make-col-ready;

    max-inline-size: calc(320px + #{$spacing-10});

    @include breakpoint(sm) {
      .#{$prefix}--card__CTA {
        margin-inline-start: -($spacing-05);
      }
    }

    @include breakpoint(md) {
      @include make-col(4, 8);

      max-inline-size: calc(320px + #{$spacing-10});
      padding-inline: $spacing-05;
    }
  }

  :host(#{$c4d-prefix}-content-block),
  :host(#{$c4d-prefix}-callout-with-media-copy),
  :host(#{$c4d-prefix}-content-block-copy),
  :host(#{$c4d-prefix}-content-block-heading),
  :host(#{$c4d-prefix}-content-block-complementary),
  :host(#{$c4d-prefix}-content-block-paragraph) {
    display: block;
  }

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

  :host(#{$c4d-prefix}-callout-with-media-copy[size='sm']),
  :host(#{$c4d-prefix}-content-block-copy[size='sm']) {
    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
      @include type-style('body-02', true);
    }
  }

  // TODO: Apply `cds--make-col(2, 3)` to React version, too, so we can merge the style to React version
  .#{$c4d-prefix}-ce--content-block__col {
    @include make-col(2, 3);
  }
}