/**
 * 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.
 */

/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/logo-grid/logo-grid"
@warn 'Deprecated scss import for `logo-grid`, remap to `@carbon/ibmdotcom-styles/scss/components/logo-grid/logo-grid`';
@use '../../globals/utils/flex-grid' as *;
@use '../../../components/logo-grid';

@mixin logo-grid {
  .#{$prefix}--logo-grid {
    padding: $spacing-03;

    .#{$prefix}--content-block {
      background: $icon-inverse;
      padding-block: 0;
    }

    .#{$prefix}--content-block__heading {
      margin: $layout-03 0;
      color: $text-primary;

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

    &__container {
      border-block-end: 1px $toggle-off solid;
    }

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

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

    .#{$prefix}--content-block__cta {
      margin-block: $layout-01 $layout-07;
      padding-inline-start: $spacing-05;
      @include make-col-ready;
      @include make-col(1, 1);

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

      .#{$prefix}--card__heading {
        @include type-style('heading-compact-01');
      }
    }

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

    &__link {
      display: block;
      &:hover .#{$prefix}--logo-grid__logo {
        box-shadow: inset 0 0 0 1px $toggle-off;
      }
      &:active .#{$prefix}--logo-grid__logo {
        box-shadow: inset 0 0 0 1px $layer-accent-01;
      }
    }

    &__row {
      @include make-row;
    }

    &__col {
      @include make-col-ready;
      @include make-col(1, 2);

      margin-block-end: $spacing-07;

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

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

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

    &__wrapper {
      inline-size: 100%;
    }

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

      &:hover img {
        border: 1px $toggle-off solid;
      }

      &: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: contain;
      }
    }
  }
}