/**
 * 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 '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../globals/utils/aspect-ratio';
@use '../../globals/carbon-grid';
@use '../../globals/utils/ratio-base' as *;
@use '../../globals/tokens/color-tokens' as *;

@mixin feature-section {
  :host(#{$c4d-prefix}-feature-section) {
    display: block;
    outline: none;
  }

  .#{$prefix}--feature-section {
    position: relative;
    box-sizing: border-box;
    outline: none;
    padding-inline: $spacing-05;

    &:hover {
      ::slotted([slot='image']),
      .#{$prefix}--image {
        &::before {
          opacity: 0;
        }
      }
    }

    &:active,
    &:focus-within {
      outline: none;

      ::slotted(#{$c4d-prefix}-image),
      .#{$prefix}--image {
        z-index: 0;
      }
    }
  }

  .#{$prefix}--feature-section__container {
    display: block;
    background-color: $layer-01;

    div[class^='#{$prefix}--col'] {
      box-sizing: border-box;
    }

    @include breakpoint(lg) {
      display: flex;
    }
  }

  :host(#{$c4d-prefix}-feature-section[color-scheme='inverse'])
    .#{$prefix}--feature-section__container {
    background-color: $background-inverse;

    ::slotted([slot='eyebrow']),
    ::slotted([slot='heading']),
    ::slotted([slot='copy']) {
      color: $text-inverse;
    }
  }

  :host(#{$c4d-prefix}-feature-section[color-scheme='cyan'])
    .#{$prefix}--feature-section__container {
    background-color: $background-cyan;
  }

  :host(#{$c4d-prefix}-feature-section[color-scheme='purple'])
    .#{$prefix}--feature-section__container {
    background-color: $background-purple;
  }

  .#{$prefix}--feature-section__body {
    position: relative;
    padding-block-start: $spacing-07;
    padding-inline: 0;

    @include breakpoint(max) {
      padding-block-start: $spacing-08;
    }

    ::slotted(#{$c4d-prefix}-content-item-paragraph) {
      margin-block-end: $spacing-07;

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

    ::slotted([slot='footer']) {
      position: relative;
      display: inline-block;
      margin-inline-start: 25%;

      @include breakpoint(md) {
        margin-inline-start: 50%;
      }

      @include breakpoint(lg) {
        position: absolute;
        margin-inline-start: 0;
      }
    }
  }

  .#{$prefix}--feature-section__image {
    position: relative;
    border: 1px solid $border-subtle-01;
    padding-inline: 0;

    ::slotted(#{$c4d-prefix}-image) {
      overflow: hidden;
      block-size: 100%;

      @include breakpoint(sm) {
        block-size: aspect-ratio(1, 1);
      }

      @include breakpoint(md) {
        block-size: aspect-ratio(4, 3);
      }

      @include breakpoint(lg) {
        block-size: aspect-ratio(1, 1);
      }
    }
  }

  ::slotted(#{$c4d-prefix}-card-eyebrow) {
    display: inline-block;
    margin-block-end: $spacing-03;
  }

  ::slotted([slot='footer']) {
    position: absolute;
    block-size: auto;
    inline-size: 75%;
    inset-block-end: -1px;
    inset-inline-end: 0;

    @include breakpoint(md) {
      inline-size: calc(50% - #{$spacing-05});
      inset-inline-end: $spacing-05;
    }

    @include breakpoint(lg) {
      inline-size: calc(50% - #{$spacing-03});
    }

    @include breakpoint(max) {
      inline-size: calc(50% - #{$spacing-04});
    }

    .#{$prefix}--card {
      max-inline-size: inherit;
    }

    @include breakpoint(max) {
      inset-inline-end: $spacing-06;
    }
  }
}