// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * 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`.
 *
 * @summary Initializes a file component
 *
 * @name base
 * @selector .slds-file
 * @restrict figure, div
 * @support dev-ready
 * @variant
 */
.slds-image,
.slds-file {
  display: block;
  position: relative;

  /**
   * Text title for file name
   *
   * @selector .slds-file__text
   * @restrict .slds-file__title span
   */
  .slds-file__text {
    display: block;
  }

  /**
   * A decorator class that prevents hover styles from being applied to Files in loading state
   *
   * @selector .slds-file_loading
   * @restrict .slds-file, .slds-image
   */

  // Hover state
  &:not(.slds-file_loading) .slds-file__figure:hover:before,
  &:not(.slds-file_loading) .slds-file__figure:hover:after,
  &:not(.slds-file_loading) .slds-file__figure:focus:before,
  &:not(.slds-file_loading) .slds-file__figure:focus:after,
  &:not(.slds-file_loading) .slds-file__crop:hover:before,
  &:not(.slds-file_loading) .slds-file__crop:hover:after,
  &:not(.slds-file_loading) .slds-file__crop:focus:before,
  &:not(.slds-file_loading) .slds-file__crop:focus:after {
    position: absolute;
    z-index: $files-z-index-hover;
    cursor: pointer;
    content: '';
  }

  // Adds overlay background to Files
  &:not(.slds-file_loading) .slds-file__figure:hover:before,
  &:not(.slds-file_loading) .slds-file__figure:focus:before,
  &:not(.slds-file_loading) .slds-file__crop:hover:before,
  &:not(.slds-file_loading) .slds-file__crop:focus:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--slds-g-color-neutral-10-opacity-50, #{$color-background-image-overlay});
  }

  // Adds and vertically centers "preview" icon via base64
  &:not(.slds-file_loading) .slds-file__figure:hover:after,
  &:not(.slds-file_loading) .slds-file__figure:focus:after,
  &:not(.slds-file_loading) .slds-file__crop:hover:after,
  &:not(.slds-file_loading) .slds-file__crop:focus:after {
    top: 50%;
    left: 50%;
    width: $square-icon-large-content;
    height: $square-icon-large-content;
    /* stylelint-disable scss/operator-no-unspaced */
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MiIgaGVpZ2h0PSI1MiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUxLjggMjVBMjkgMjkgMCAwIDAgMjYgOSAyOSAyOSAwIDAgMCAuMiAyNWEyIDIgMCAwIDAgMCAxLjhDNSAzNi40IDE0LjcgNDMgMjYgNDNhMjkgMjkgMCAwIDAgMjUuOC0xNiAyIDIgMCAwIDAgMC0xLjh6TTI2IDM3YTExIDExIDAgMSAxIDAtMjIgMTEgMTEgMCAxIDEgMCAyMnptMC0xOGMtNCAwLTcgMy03IDdzMyA3IDcgNyA3LTMgNy03LTMtNy03LTd6Ii8+PC9zdmc+);
    /* stylelint-enable scss/operator-no-unspaced */
    background-size: contain;
    transform: translate(-50%, -50%);
  }

  // Remove hover state for devices with any available input mechanism can hover over elements
  @media (any-hover:none) {

    &:not(.slds-file_loading) .slds-file__figure:hover:before,
    &:not(.slds-file_loading) .slds-file__figure:hover:after,
    &:not(.slds-file_loading) .slds-file__figure:focus:before,
    &:not(.slds-file_loading) .slds-file__figure:focus:after,
    &:not(.slds-file_loading) .slds-file__crop:hover:before,
    &:not(.slds-file_loading) .slds-file__crop:hover:after,
    &:not(.slds-file_loading) .slds-file__crop:focus:before,
    &:not(.slds-file_loading) .slds-file__crop:focus:after {
      display: none;
    }
  }

  // Puts title bar and actions menu at the same z-index as the overlay, so they remain clickable
  &:not(.slds-file_loading) .slds-file__figure:hover + .slds-file__title,
  &:not(.slds-file_loading) .slds-file__figure:focus + .slds-file__title,
  &:not(.slds-file_loading) .slds-file__crop:hover + .slds-file__title,
  &:not(.slds-file_loading) .slds-file__crop:focus + .slds-file__title {
    z-index: $files-z-index-hover;
  }

  /**
   * A decorator class that allows the hover icon to be positioned properly when File has a title
   *
   * @selector .slds-has-title
   * @restrict .slds-file, .slds-image
   */

  // 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% - (#{$square-icon-large-content} / 2)));
  }


  &:focus {
    border: $border-width-thin solid var(--slds-g-color-brand-base-50, #{$color-border-brand-dark});
  }

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

  /**
   * Modifying class if the image in a figure is in portrait orientation
   *
   * @selector .slds-file__figure_portrait
   * @restrict .slds-file a, .slds-file figure
   */
  // 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: $size-small;
    height: auto;
  }
}

/**
  * Set crop boundaries to a file component, set to 16:9 by default
  *
  * @selector .slds-file__crop
  * @restrict .slds-file a, .slds-file figure
  */
.slds-image__crop,
.slds-file__crop {
  display: block;
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;

  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    max-width: 200%; // This value helps with the positioning of large elements
  }

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

  &:focus {
    box-shadow: var(--slds-g-shadow-outset-focus-1);
    outline: 0;
    border-radius: $border-radius-small;
  }
}

/**
  * Crops file to a ratio of 1:1
  *
  * @selector .slds-file__crop_1-by-1
  * @restrict .slds-file__crop
  * @modifier
  * @group ratio
  */
.slds-image__crop_1-by-1,
.slds-image__crop--1-by-1,
.slds-file__crop_1-by-1,
.slds-file__crop--1-by-1 {
  padding-top: 100%;
}

/**
  * Crops file to a ratio of 16:9
  *
  * @selector .slds-file__crop_16-by-9
  * @restrict .slds-file__crop
  * @modifier
  * @group ratio
  */
.slds-image__crop_16-by-9,
.slds-image__crop--16-by-9,
.slds-file__crop_16-by-9,
.slds-file__crop--16-by-9 {
  padding-top: 56.25%;
}

/**
  * Crops file to a ratio of 4:3
  *
  * @selector .slds-file__crop_4-by-3
  * @restrict .slds-file__crop
  * @modifier
  * @group ratio
  */
.slds-image__crop_4-by-3,
.slds-image__crop--4-by-3,
.slds-file__crop_4-by-3,
.slds-file__crop--4-by-3 {
  padding-top: 75%;
}

/**
  * Figure element that contains the image of a File
  *
  * @selector .slds-file__figure
  * @restrict .slds-file a, .slds-file figure
  */
.slds-image__figure,
.slds-file__figure {
  display: block;
  min-width: $size-x-small;
  max-width: $size-small;
  min-height: $size-xx-small;
  max-height: $size-small;
}

/**
  * Image caption associated to a file
  *
  * @selector .slds-file__title
  * @restrict .slds-file figcaption, .slds-file div
  */
.slds-image__title,
.slds-file__title {
  display: flex;
  z-index: $files-z-index-hover;
  align-items: center;
  padding: $spacing-x-small;
  overflow: hidden;

  .slds-media {
    overflow: hidden;
  }
}

/**
  * Hack to accomodate for text truncation next to actions menu buttons
  *
  * @selector .slds-file-has-actions
  * @restrict .slds-file__title
  */
.slds-image-has-actions,
.slds-file-has-actions {
  padding-right: $spacing-xx-large;
}

/**
  * If text sits on top of image, apply an overlay with this class
  *
  * @selector .slds-file_overlay
  * @restrict .slds-file div
  */
.slds-image_overlay,
.slds-image--overlay,
.slds-file_overlay,
.slds-file--overlay {
  content: '';
  background: var(--slds-g-color-neutral-10-opacity-50, #{$color-background-image-overlay});
  color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/**
  * Change style of image to a card look
  *
  * @selector .slds-file_card
  * @restrict .slds-file
  */
.slds-image_card,
.slds-image--card,
.slds-file_card,
.slds-file--card {
  background: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
  border: $border-width-thin solid var(--slds-g-color-neutral-10-opacity-10, rgba(0, 0, 0, 0.16));
}

/**
  * When only image type is available, this class help position the file type icon
  *
  * @selector .slds-file__icon
  * @restrict .slds-file div, .slds-file span
  */
.slds-image__icon,
.slds-file__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  margin-top: (($square-icon-large-content * 0.5) * -1); // Half the size of the icon
}

/**
  * This positions the action menu on the title bar
  *
  * @selector .slds-file__actions-menu
  * @restrict .slds-file div
  */
.slds-image__actions-menu,
.slds-file__actions-menu {
  position: absolute;
  z-index: $files-z-index-hover;
  bottom: $spacing-x-small;
  right: $spacing-xx-small;
}

/**
  * This adds an external icon to the top left side of the card
  *
  * @selector .slds-file__external-icon
  * @restrict .slds-file div
  * @required
  */

.slds-image__external-icon,
.slds-file__external-icon {
  position: absolute;
  top: ($spacing-x-large + $spacing-x-small);
  left: $spacing-large;
}

/**
  * This changes the color of the loading icon
  *
  * @selector .slds-file__loading-icon
  * @restrict .slds-file svg
  * @required
  */

.slds-image__loading-icon,
.slds-file__loading-icon {
  fill: var(--slds-g-color-neutral-base-80, #{$color-text-icon-default-disabled});
}

/**
  * This vertically centers the icon when there is no title bar
  *
  * @selector .slds-file_center-icon
  * @restrict .slds-file
  */

.slds-image_center-icon,
.slds-file_center-icon {

  .slds-file__icon {
    margin-top: 0;
  }
}

/**
  * Adds overlay to file
  *
  * @selector .slds-file__title_overlay
  * @restrict .slds-file__title
  */

.slds-image__title_overlay,
.slds-image__title--overlay,
.slds-file__title_overlay,
.slds-file__title--overlay {
  color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

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

/**
  * Creates card title bar on file
  *
  * @selector .slds-file__title_card
  * @restrict .slds-file__title
  */
.slds-image__title_card,
.slds-image__title--card,
.slds-file__title_card,
.slds-file__title--card {
  background: var(--slds-g-color-neutral-base-95, #{$color-background});
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

/**
  * Creates gradient scrim bar on file
  *
  * @selector .slds-file__title_scrim
  * @restrict .slds-file__title
  */
.slds-image__title_scrim,
.slds-file__title_scrim {
  background: linear-gradient(to bottom, transparent, var(--slds-g-color-neutral-10-opacity-50, rgba(0, 0, 0, 0.5)));
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: $spacing-medium;
}