/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * A figure component is a self-contained unit of content, such as an image with an optional caption.
 * The figure component should NOT be used with icons or logos. A figure can optionally be cropped to a specific ratio
 * such as 16x9, 4x3 and 1x1 with the use of `.slds-image__crop` and passing in a ratio class such as `.slds-image__crop_16-by-9`.
 *
 * Initializes a file component
 */
.slds-image,
.slds-file {
  display: block;
  position: relative;

  /**
   * Text title for file name
   */
  .slds-file__text {
    display: block;
    color: var(--slds-g-color-on-surface-2);
  }

  /**
   * A decorator class that positions the background on hover/focus
   */
  .slds-file__figure:hover::before,
  .slds-file__figure:hover::after,
  .slds-file__figure:focus::before,
  .slds-file__figure:focus::after,
  .slds-file__crop:hover::before,
  .slds-file__crop:hover::after,
  .slds-file__crop:focus::before,
  .slds-file__crop:focus::after {
    position: absolute;
    z-index: 5;
    cursor: pointer;
    content: '';
  }

  /**
    * Hide the background styles on hover/focus in loading state
    */
  &.slds-file_loading .slds-file__figure:hover::before,
  &.slds-file_loading .slds-file__figure:hover::after,
  &.slds-file_loading .slds-file__figure:focus::before,
  &.slds-file_loading .slds-file__figure:focus::after,
  &.slds-file_loading .slds-file__crop:hover::before,
  &.slds-file_loading .slds-file__crop:hover::after,
  &.slds-file_loading .slds-file__crop:focus::before,
  &.slds-file_loading .slds-file__crop:focus::after {
    display: none;
  }

  /**
    * Adds overlay background to Files
    */
  .slds-file__figure:hover::before,
  .slds-file__figure:focus::before,
  .slds-file__crop:hover::before,
  .slds-file__crop:focus::before {
    inset-block-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    inset-inline-start: 0;
    background-color: rgb(24, 24, 24, 0.5);
  }

  /**
    * Adds and vertically centers "preview" icon via base64
    */
  .slds-file__figure:hover::after,
  .slds-file__figure:focus::after,
  .slds-file__crop:hover::after,
  .slds-file__crop:focus::after {
    inset-block-start: 50%;

    /* RTL: physical — centering paired with translate */
    left: 50%;
    width: var(--slds-g-sizing-9);
    height: var(--slds-g-sizing-9);
    /* stylelint-disable */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MiIgaGVpZ2h0PSI1MiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUxLjggMjVBMjkgMjkgMCAwIDAgMjYgOSAyOSAyOSAwIDAgMCAuMiAyNWEyIDIgMCAwIDAgMCAxLjhDNSAzNi40IDE0LjcgNDMgMjYgNDNhMjkgMjkgMCAwIDAgMjUuOC0xNiAyIDIgMCAwIDAgMC0xLjh6TTI2IDM3YTExIDExIDAgMSAxIDAtMjIgMTEgMTEgMCAxIDEgMCAyMnptMC0xOGMtNCAwLTcgMy03IDdzMyA3IDcgNyA3LTMgNy03LTMtNy03LTd6Ii8+PC9zdmc+);
    /* stylelint-enable */
    background-size: contain;
    transform: translate(-50%, -50%);
  }

  /* Puts title bar and actions menu at the same z-index as the overlay, so they remain clickable */
  .slds-file__figure:hover + .slds-file__title,
  .slds-file__figure:focus + .slds-file__title,
  .slds-file__crop:hover + .slds-file__title,
  .slds-file__crop:focus + .slds-file__title {
    z-index: 5;
  }

  /**
   * A decorator class that allows the hover icon to be positioned properly when File has a title
   */
  /* When a title card is present, take its height into account when centering the "preview" icon */
  &.slds-has-title .slds-file__figure:hover::after,
  &.slds-has-title .slds-file__figure:focus::after,
  &.slds-has-title .slds-file__crop:hover::after,
  &.slds-has-title .slds-file__crop:focus::after {
    transform: translate(-50%, calc(-50% - (var(--slds-g-sizing-9) / 2)));
  }

  &:focus {
    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-accent-1);
    box-shadow: 0 4px 4px 0 rgb(0, 0, 0, 0.16);
  }

  /* When a spinner is used with .slds-file__title_card, this attempts to visually center the spinner */
  :not(:only-child) .slds-spinner {
    inset-block-start: 45%; /* magic number */
  }

  /**
   * Modifying class if the image in a figure is in portrait orientation
   */
  /* This is used to properly constrain portrait images. Without this,
     portrait images larger than 240px tall will overflow its container. */
  .slds-file__figure_portrait img {
    display: block;
    margin: 0 auto;
    max-height: var(--slds-g-sizing-14);
    height: auto;
  }
}

/**
  * Remove hover state for devices with any available input mechanism can hover over elements
  */
@media (any-hover: none) {
  .slds-image .slds-file__figure:hover::before,
  .slds-image .slds-file__figure:hover::after,
  .slds-image .slds-file__figure:focus::before,
  .slds-image .slds-file__figure:focus::after,
  .slds-image .slds-file__crop:hover::before,
  .slds-image .slds-file__crop:hover::after,
  .slds-image .slds-file__crop:focus::before,
  .slds-image .slds-file__crop:focus::after,
  .slds-file .slds-file__figure:hover::before,
  .slds-file .slds-file__figure:hover::after,
  .slds-file .slds-file__figure:focus::before,
  .slds-file .slds-file__figure:focus::after,
  .slds-file .slds-file__crop:hover::before,
  .slds-file .slds-file__crop:hover::after,
  .slds-file .slds-file__crop:focus::before,
  .slds-file .slds-file__crop:focus::after {
    display: none;
  }
}

/**
  * Set crop boundaries to a file component, set to 16:9 by default
  */
.slds-image__crop,
.slds-file__crop {
  display: block;
  position: relative;
  overflow: hidden;
  padding-block-start: 56.25%;
  border-radius: var(--slds-g-radius-border-2);

  img {
    position: absolute;
    top: 50%;

    /* RTL: physical — centering paired with translate */
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    max-width: 200%; /* This value helps with the positioning of large elements */
  }

  &:focus-visible {
    outline: none;
    box-shadow: var(--slds-g-shadow-outset-focus-1);
  }

  &::after {
    content: '';
    display: block;
  }
}

/**
  * Crops file to a ratio of 1:1
  */
.slds-image__crop_1-by-1,
.slds-file__crop_1-by-1 {
  padding-block-start: 100%;
}

/**
  * Crops file to a ratio of 16:9
  */
.slds-image__crop_16-by-9,
.slds-file__crop_16-by-9 {
  padding-block-start: 56.25%;
}

/**
  * Crops file to a ratio of 4:3
  */
.slds-image__crop_4-by-3,
.slds-file__crop_4-by-3 {
  padding-block-start: 75%;
}

/**
  * Figure element that contains the image of a File
  */
.slds-image__figure,
.slds-file__figure {
  display: block;
  min-width: calc(var(--slds-g-sizing-13) + var(--slds-g-sizing-9));
  max-width: var(--slds-g-sizing-14);
  min-height: calc(var(--slds-g-sizing-10) + var(--slds-g-sizing-9));
  max-height: var(--slds-g-sizing-14);
}

/**
  * Image caption associated to a file
  */
.slds-image__title,
.slds-file__title {
  display: flex;
  z-index: 5;
  align-items: center;
  padding: var(--slds-g-spacing-2);
  overflow: hidden;

  .slds-media {
    overflow: hidden;
  }
}

/**
  * Hack to accomodate for text truncation next to actions menu buttons
  */
.slds-image-has-actions,
.slds-file-has-actions {
  padding-inline-end: var(--slds-g-spacing-8);
}

/**
  * If text sits on top of image, apply an overlay with this class
  */
.slds-image_overlay,
.slds-file_overlay {
  content: '';
  background: rgb(24, 24, 24, 0.5);
  color: var(--slds-g-color-on-surface-inverse-1);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  z-index: 1;
}

/**
  * Change style of image to a card look
  */
.slds-image_card,
.slds-file_card {
  background: var(--slds-g-color-surface-container-1);
  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
  border-radius: var(--slds-g-radius-border-2);
}

/**
  * When only image type is available, this class help position the file type icon
  */
.slds-image__icon,
.slds-file__icon {
  position: absolute;
  top: 50%;

  /* RTL: physical — centering paired with translate */
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  margin-block-start: calc((var(--slds-g-sizing-9) * 0.5) * -1); /* Half the size of the icon */
}

/**
  * This positions the action menu on the title bar
  */
.slds-image__actions-menu,
.slds-file__actions-menu {
  position: absolute;
  z-index: 5;
  inset-block-end: var(--slds-g-spacing-2);
  inset-inline-end: var(--slds-g-spacing-1);
}

/**
  * This adds an external icon to the top left side of the card
  */
.slds-image__external-icon,
.slds-file__external-icon {
  position: absolute;
  inset-block-start: var(--slds-g-spacing-7);
  inset-inline-start: var(--slds-g-spacing-5);
}

/**
  * This changes the color of the loading icon
  */
.slds-image__loading-icon,
.slds-file__loading-icon {
  fill: var(--slds-g-color-on-disabled-1);
}

/**
  * This vertically centers the icon when there is no title bar
  */
.slds-image_center-icon,
.slds-file_center-icon {
  .slds-file__icon {
    margin-block-start: 0;
  }
}

/**
  * Adds overlay to file
  */
.slds-image__title_overlay,
.slds-file__title_overlay {
  color: var(--slds-g-color-on-surface-inverse-1);
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-inline-start: 0;

  .slds-media__body {
    z-index: 1;
  }

  .slds-media__body .slds-file__text {
    color: var(--slds-g-color-on-surface-inverse-1);
  }
}

/**
  * Creates card title bar on file
  */
.slds-image__title_card,
.slds-file__title_card {
  background: var(--slds-g-color-surface-container-2);
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  border-bottom-left-radius: var(--slds-g-radius-border-2);
  border-bottom-right-radius: var(--slds-g-radius-border-2);
}

/**
  * Creates gradient scrim bar on file
  */
.slds-image__title_scrim,
.slds-file__title_scrim {
  background: linear-gradient(to bottom, transparent, rgb(24, 24, 24, 0.5));
  position: absolute;
  inset-inline-end: 0;
  inset-block-end: 0;
  inset-inline-start: 0;
  padding: var(--slds-g-spacing-4);
}