//
// Copyright IBM Corp. 2020, 2025
//
// 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 '@carbon/ibmdotcom-styles/scss/components/cta-block';
@use '@carbon/ibmdotcom-styles/scss/components/layout';
@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *;
@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
@use '@carbon/ibmdotcom-styles/scss/globals/scroll-snap' as *;
:host(#{$c4d-prefix}-cta-block) {
  display: block;

  .#{$prefix}--content-layout {
    @include breakpoint(sm) {
      padding-inline: $spacing-05;
      padding-inline-end: $spacing-05;
    }

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

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

    &.#{$prefix}--content-layout--border {
      border-block-end: 1px solid $border-strong-01;
    }

    ::slotted([slot]) {
      margin-inline: 0;
    }
  }

  ::slotted(#{$c4d-prefix}-content-block-heading) {
    @include make-col(8, 12);

    margin-block-end: $spacing-07;
    margin-inline-start: 0;
    padding-inline: 0;
  }

  .#{$prefix}--content-layout__body--tight {
    .#{$prefix}--content-layout__link-list,
    .#{$prefix}--helper-wrapper {
      margin-block-start: 0;

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

  ::slotted(#{$c4d-prefix}-content-block-copy) {
    @include make-col(8, 12);
    @include type-style('fluid-heading-03', true);

    max-inline-size: 640px;
    padding-inline: 0;

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

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

  ::slotted(#{$c4d-prefix}-button-group[slot='action']) {
    margin-block-end: 0;

    @include breakpoint(lg) {
      margin-block-start: 0;
    }
  }

  ::slotted(#{$c4d-prefix}-button-group:last-child) {
    margin-block-end: 0;
  }

  .#{$prefix}--content-layout__link-list {
    margin-block-start: $spacing-07;

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

  ::slotted(#{$c4d-prefix}-link-list) {
    display: block;
    padding-block-end: 0;

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

  .#{$prefix}--helper-wrapper {
    margin-block: $spacing-10;
  }
}

:host(#{$c4d-prefix}-cta-section-item-heading) {
  @include type-style('heading-02', true);

  display: block;
  inline-size: 100%;

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

:host(#{$c4d-prefix}-cta-block-item-row) {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  inline-size: 100%;

  .scroll-container {
    $gutter: 1rem;
    $gap: 1rem;

    @include breakpoint('md') {
      display: contents;
    }
    @include breakpoint-down('md') {
      @include scroll-snap-container();

      display: flex;
      gap: $gap;
      padding-inline: $gutter;

      &::after {
        flex-basis: 1px;
        flex-shrink: 0;
        content: '';
      }

      ::slotted(#{$c4d-prefix}-content-item),
      ::slotted(#{$c4d-prefix}-cta-block-item) {
        box-sizing: border-box;
        flex-basis: clamp(220px, 65vw, 400px);
        flex-shrink: 0;
        align-content: start;
        block-size: auto;
        // override web component internal padding and rely on gap instead
        padding-inline: 0;
        scroll-margin: $gutter;
        scroll-snap-align: start;
      }
    }
  }

  // Hide last row's items' bottom border
  &::after {
    @include breakpoint(md) {
      position: absolute;
      background-color: $background;
      block-size: 3px;
      content: '';
      inset-block-end: -1px;
      inset-inline: 0;
      inset-inline-end: 0;
      pointer-events: none;
    }
  }

  ::slotted(#{$c4d-prefix}-cta-block-item:last-of-type) {
    @include breakpoint-down(md) {
      border: 0;
      padding-block-end: 0;
    }
  }

  @include breakpoint(md) {
    grid-template-columns: repeat(2, 1fr);
  }

  @include breakpoint(lg) {
    grid-template-columns: repeat(3, 1fr);
  }
}

.#{$c4d-prefix}-ce--cta-block__col {
  @include make-col(2, 3);
}

:host(#{$c4d-prefix}-cta-block-item) {
  @include make-col-ready;

  position: relative;
  display: grid;
  grid-row: auto / span 5;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  inline-size: 100%;
  margin-block: 0;
  margin-block-end: 0;
  padding-block-end: $spacing-07;

  ::slotted(#{$c4d-prefix}-text-cta) {
    margin-block-end: $spacing-03;
    margin-inline-start: 0;
  }

  ::slotted(#{$c4d-prefix}-text-cta:last-child) {
    margin-block-end: 0;
  }

  ::slotted(svg) {
    display: block;
    block-size: $spacing-11;
    inline-size: $spacing-11;
  }

  .#{$prefix}--cta-block-item__statitics {
    @include type-style('fluid-display-02', true);

    ::slotted(*[slot='statitics']) {
      margin-block-end: $spacing-07;
    }
  }

  .#{$prefix}--cta-block-item__media {
    margin-block-end: $spacing-07;
  }

  .#{$prefix}--content-item__cta {
    display: flex;
    flex-direction: column;
    margin-block: 0;
  }

  ::slotted(#{$c4d-prefix}-image-logo) {
    margin: 0;
    /* stylelint-disable */
    aspect-ratio: var(--logo-ratio);
    /* stylelint-enable */
    max-inline-size: $spacing-12;
  }
}