/**
 * Copyright IBM Corp. 2016, 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 '../../globals/vars' as *;
@use '../../globals/imports' as *;
@use '../../globals/utils/ratio-base' as *;
@use '@carbon/styles/scss/config' as *;
@use '@carbon/styles/scss/spacing' as *;
@use '@carbon/styles/scss/theme' as *;
@use '@carbon/styles/scss/breakpoint' as *;
@use '@carbon/styles/scss/motion' as *;
@use '@carbon/styles/scss/type' as *;
@use '@carbon/styles/scss/utilities/convert' as *;
@use '@carbon/colors' as *;
@use '../lightbox-media-viewer/lightbox-media-viewer';

@mixin image {
  :host(#{$c4d-prefix}-global-banner-image),
  :host(#{$c4d-prefix}-card-cta-image),
  :host(#{$c4d-prefix}-image) {
    position: relative;
    display: block;

    .#{$c4d-prefix}--image__img {
      display: block;
      block-size: 100%;
      inline-size: 100%;
      object-fit: cover;
    }

    .#{$c4d-prefix}--image__img--border {
      outline: 1px solid $border-subtle-02;
    }
  }

  :host(#{$c4d-prefix}-card-cta-image::slotted(svg[slot='icon'])),
  :host(#{$c4d-prefix}-image::slotted(svg[slot='icon'])) {
    position: absolute;
    inset-block-start: calc(50% - #{$spacing-07});
    inset-inline-end: calc(50% - #{$spacing-07});
  }

  :host(#{$c4d-prefix}-image-item) {
    display: none;
  }

  :host(#{$c4d-prefix}-image)[card-group-item],
  :host(#{$c4d-prefix}-image) {
    overflow: hidden;
  }

  .#{$c4d-prefix}--image__longdescription {
    position: absolute;
    overflow: hidden;
    block-size: 1px;
    inline-size: 1px;
    inset-block-start: auto;
    inset-inline-start: -10000px;
  }

  :host(#{$c4d-prefix}-image)[heading] {
    display: block;
    margin-block: $spacing-07;

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

  .#{$c4d-prefix}--image-with-caption__image {
    position: relative;
    display: block;
    padding: 0;
    border: 1px solid $border-tile-01;
    background-color: transparent;
    inline-size: 100%;
    pointer-events: none;

    &:hover {
      // only have lightbox functionality on bigger breakpoints
      @include breakpoint(md) {
        cursor: zoom-in;

        .#{$c4d-prefix}--image__img {
          filter: brightness(80%);
        }

        .#{$c4d-prefix}--image-with-caption__zoom-button {
          background-color: rgba($gray-100, 1);
        }
      }
    }

    &:focus {
      // only have lightbox functionality on bigger breakpoints
      @include breakpoint(md) {
        border: 1px solid $focus-inset;
        outline: $spacing-01 solid $focus;
      }
    }
  }

  .#{$c4d-prefix}--image-with-caption__zoom-button {
    display: none;

    // only have lightbox functionality on bigger breakpoints
    @include breakpoint(md) {
      position: absolute;
      display: flex;
      background-color: rgba($gray-100, 0.85);
      block-size: $spacing-09;
      inline-size: $spacing-09;
      inset-block-end: 0;
      inset-inline-end: 0;

      svg {
        margin: auto;
        fill: $white;
      }
    }
  }

  .#{$c4d-prefix}--image-with-caption__image,
  .#{$c4d-prefix}--image-with-caption__zoom-button {
    // only have lightbox functionality on bigger breakpoints
    @include breakpoint(md) {
      pointer-events: auto;
      transition: $duration-moderate-01 motion(standard, productive);
    }
  }

  .#{$c4d-prefix}--image__caption {
    @include type-style('body-01');

    color: $text-helper;

    margin-block-start: $spacing-03;

    max-inline-size: to-rem(640px);
  }

  :host(#{$c4d-prefix}-image[lightbox-contrast='dark']) {
    .#{$c4d-prefix}--image-with-caption__zoom-button {
      background-color: rgba($white, 0.85);

      svg {
        fill: $gray-90;
      }
    }
    .#{$c4d-prefix}--image-with-caption__image {
      &:hover {
        // only have lightbox functionality on bigger breakpoints
        @include breakpoint(md) {
          .#{$c4d-prefix}--image__img {
            filter: brightness(120%);
          }

          .#{$c4d-prefix}--image-with-caption__zoom-button {
            background-color: rgba($white, 1);
          }
        }
      }
    }
  }

  // c4d-image-logo style.
  :host(#{$c4d-prefix}-image-logo) {
    margin: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
    background-color: $layer-02;
    max-inline-size: $spacing-13;

    @include ratio-base(2, 1, false);

    .#{$c4d-prefix}--image__img {
      block-size: 100%;
      inline-size: 100%;
      object-fit: contain;
    }
  }
}