/**
 * 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 'sass:math';

@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 '../../globals/utils/flex-grid' as *;
@use '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../globals/utils/hang' as *;
@use '../../globals/utils/aspect-ratio';
@use '../image';
@use '../../internal/content-block';

@mixin logo-grid {
  .#{$prefix}--logo-grid,
  :host(#{$c4d-prefix}-logo-grid) {
    .#{$prefix}--content-block {
      background: $icon-inverse;
      padding-block: 0;
      padding-block-end: 0;
    }

    .#{$prefix}--content-block__heading,
    .#{$prefix}--content-layout--logo-grid ::slotted([slot]) {
      margin: $spacing-10 0 0;
      color: $text-primary;

      @include breakpoint-down(md) {
        margin: $spacing-07 0 0;
      }
    }

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

    .#{$prefix}--content-block__cta {
      margin-block-start: $spacing-09;

      @include make-col-ready;
      @include make-col(1, 1);

      padding-inline-start: $spacing-05;

      @include breakpoint(md) {
        @include make-col(1, 3);
      }
    }

    .#{$prefix}--card__CTA {
      margin-inline-start: 0;
      max-inline-size: 100%;
    }

    .#{$prefix}--image {
      position: relative;
      display: block;
      background: $icon-inverse;
      overflow-y: hidden;
      padding-block: aspect-ratio(288px, 216px);

      &:active img {
        border: 1px $layer-accent-01 solid;
      }

      img {
        position: absolute;
        display: block;
        block-size: auto;
        inline-size: 100%;
        inset-block-start: 0;
        object-fit: cover;
      }
    }
  }

  :host(#{$c4d-prefix}-logo-grid) {
    .#{$prefix}--content-block__cta-row[hidden] {
      display: none;
    }
  }

  .#{$prefix}--logo-grid__no-border {
    .#{$prefix}--logo-grid__container {
      border-block-end: none;
    }
  }

  .#{$prefix}--logo-grid__link {
    display: block;

    &:active .#{$prefix}--logo-grid__logo {
      box-shadow: inset 0 0 0 1px $layer-accent-01;
    }
  }

  .#{$prefix}--logo-grid__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-inline: calc(-1 * math.div($grid-gutter, 2));

    @include breakpoint(md) {
      &.#{$prefix}--logo-grid__4-columns {
        grid-template-columns: repeat(4, 1fr);
      }
    }

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

      &.#{$prefix}--logo-grid__4-columns {
        grid-template-columns: repeat(4, 1fr);
      }
    }
  }

  .#{$prefix}--logo-grid__col,
  :host(#{$c4d-prefix}-logo-grid-item) {
    aspect-ratio: var(--logo-ratio, '16/9'); /* stylelint-disable-line */
    padding-inline: math.div($grid-gutter, 2);
  }

  :host(#{$c4d-prefix}-logo-grid-item) {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-block-start: $spacing-07;

    picture,
    img {
      block-size: 100%;
      inline-size: 100%;
      object-fit: cover;
    }
  }

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

    inline-size: 90%;
    margin-block: $spacing-07;
  }

  .#{$prefix}--content-layout__body {
    display: block;
  }

  .#{$prefix}--logo-grid__wrapper,
  .#{$prefix}--content-layout--logo-grid {
    inline-size: 100%;
    margin-block-end: $spacing-13;
    @include breakpoint-down(md) {
      margin-block-end: $spacing-12;
    }
  }

  :host(#{$c4d-prefix}-logo-grid-link) ::slotted(svg) {
    fill: $link-primary;
    margin-block-start: auto;
  }

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

  cds-hr,
  .#{$prefix}--hr {
    @include hang;
  }
}