/**
 * 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/themes' as *;
@use '@carbon/styles/scss/type' as *;
@use '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../internal/content-block';
@use '../../internal/content-item/content-item';
@use '../button-group';

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

  .#{$prefix}--content-item__heading {
    color: $text-primary;
  }

  .#{$prefix}--content-item__copy {
    p {
      color: $text-primary;
    }
  }

  .#{$prefix}--content-item__cta {
    color: $link-primary;
  }
}

@mixin cta-section {
  :host(#{$c4d-prefix}-cta-section),
  .#{$prefix}--cta-section {
    .#{$prefix}--cta-section__cta {
      padding-block-end: $spacing-10;

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

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

      .#{$prefix}--buttongroup {
        @include breakpoint(md) {
          flex-direction: row;
        }
      }

      .#{$prefix}--buttongroup-item {
        @include breakpoint(md) {
          padding-inline-end: $spacing-05;
        }
      }
    }

    .#{$prefix}--content-block {
      padding-block: $spacing-07 0;

      @include breakpoint(lg) {
        padding-block-start: $spacing-10;
      }
    }

    .#{$prefix}--content-block__heading,
    .#{$prefix}--content-block__copy {
      inline-size: 90%;
      max-inline-size: 640px;

      @include breakpoint(sm) {
        inline-size: 100%;
      }
    }

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

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

    .#{$prefix}--content-block__cta-col {
      margin-block-start: 0;
    }

    .#{$prefix}--helper-wrapper {
      .#{$prefix}--content-item-wrapper {
        border-block-start: 1px solid $layer-accent-01;

        @include make-row;

        .#{$prefix}--content-item {
          position: relative;
          inline-size: 100%;
          margin-block-end: 0;
          padding-block-end: $spacing-05;

          @include make-col-ready;

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

          &:last-of-type {
            margin-block-start: $spacing-05;

            @include breakpoint(md) {
              margin-block-start: $spacing-07;
            }
          }
        }

        .#{$prefix}--content-item__heading {
          inline-size: 100%;

          @include type-style('heading-02', true);

          @include breakpoint(md) {
            inline-size: 90%;
          }
        }

        .#{$prefix}--content-item__copy {
          inline-size: 100%;

          @include breakpoint(md) {
            inline-size: 90%;
          }

          p {
            inline-size: 100%;
            margin-block-end: $spacing-05;

            @include type-style('body-02', true);
          }
        }
      }
    }

    &.#{$prefix}--cta-section__has-items {
      padding-block-end: $spacing-09;

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

      .#{$prefix}--cta-section__cta {
        padding-block-end: $spacing-07;

        @include breakpoint(md) {
          padding-block-end: $spacing-10;
        }

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

      .#{$prefix}--content-block {
        padding-block-end: 0;
      }
    }

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

  .#{$prefix}--cta-section--g10 {
    @include theme($g10, true);
    @include themed-items;
  }

  .#{$prefix}--cta-section--g90 {
    @include theme($g90, true);
    @include themed-items;
  }

  .#{$prefix}--cta-section--g100 {
    @include theme($g100, true);
    @include themed-items;
  }
}