/**
 * 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 '../../globals/utils/flex-grid' as *;
@use '../../../components/button-group';

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

  .#{$prefix}--content-item {
    &__heading {
      color: $text-primary;
    }

    &__copy {
      p {
        color: $text-primary;
      }
    }

    &__cta {
      color: $link-primary;
    }
  }
}

@mixin cta-section {
  .#{$prefix}--cta-section {
    &__cta {
      @include breakpoint(md) {
        padding-block-end: $spacing-12;
      }
    }

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

      &__heading,
      &__copy {
        inline-size: 90%;
        max-inline-size: 640px;

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

      &__heading {
        @include type-style('fluid-heading-05', true);
      }

      &__copy {
        p {
          margin-block-end: 0;
          @include type-style('fluid-heading-03', true);
        }
      }

      &__cta-col {
        margin-block-start: 0;
      }

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

    .#{$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;

          &__heading {
            inline-size: 100%;

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

          &__copy {
            inline-size: 100%;

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

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

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

            &__heading {
              inline-size: 90%;
            }

            &__copy {
              inline-size: 90%;
            }
          }

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

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

    &.#{$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, feature-flag-enabled('enable-css-custom-properties')) {
      @include themed-items;
    }
  }

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

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