/*!
Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/

.spectrum{
  --system-spectrum-assetcard-overlay-background-color:rgba(27, 127, 245, 0.1);
}

.spectrum--express{
  --system-spectrum-assetcard-overlay-background-color:rgba(109, 115, 246, 0.2);
}

.spectrum-AssetCard{
  --spectrum-assetcard-asset-size:224px;
  --spectrum-assetcard-background-color:var(--spectrum-gray-200);
  --spectrum-assetcard-asset-animation-duration:var(--spectrum-animation-duration-100);
  --spectrum-assetcard-asset-container-border-size:1px;
  --spectrum-assetcard-header-margin-block-start:var(--spectrum-spacing-300);

  --spectrum-assetcard-border-radius:var(--spectrum-corner-radius-100);
  --spectrum-assetcard-border-color:transparent;
  --spectrum-assetcard-border-color-hover:var(--spectrum-gray-500);
  --spectrum-assetcard-border-color-down:var(--spectrum-gray-600);

  --spectrum-assetcard-focus-ring-gap:5px;
  --spectrum-assetcard-focus-indicator-thickness:var(--spectrum-focus-indicator-thickness);
  --spectrum-assetcard-selectionindicator-background-color-default:rgba(var(--spectrum-gray-100-rgb), 0.9);
  --spectrum-assetcard-selectionindicator-size:var(--spectrum-card-selection-background-size);
  --spectrum-assetcard-selectionindicator-border-radius:var(--spectrum-corner-radius-100);
  --spectrum-assetcard-selectionindicator-offset-y:4px;
  --spectrum-assetcard-selectionindicator-blur:6px;
  --spectrum-assetcard-selectionindicator-color:var(--spectrum-white);
  --spectrum-assetcard-selectionindicator-font-weight:var(--spectrum-bold-font-weight);
  --spectrum-assetcard-selectionindicator-font-size:var(--spectrum-font-size-400);
  --spectrum-assetcard-title-text-color:var(--spectrum-gray-900);
  --spectrum-assetcard-title-font-family:var(--spectrum-sans-font-family-stack);
  --spectrum-assetcard-title-font-weight:var(--spectrum-heading-sans-serif-font-weight);
  --spectrum-assetcard-title-font-style:var(--spectrum-default-font-style);
  --spectrum-assetcard-title-line-height:var(--spectrum-line-height-100);
  --spectrum-assetcard-title-letter-spacing:0;
  --spectrum-assetcard-header-content-text-color:var(--spectrum-gray-900);
  --spectrum-assetcard-header-content-font-family:var(--spectrum-sans-font-family-stack);
  --spectrum-assetcard-header-content-font-weight:var(--spectrum-body-sans-serif-font-weight);
  --spectrum-assetcard-header-content-font-style:var(--spectrum-default-font-style);
  --spectrum-assetcard-header-content-line-height:var(--spectrum-line-height-200);
  --spectrum-assetcard-header-content-letter-spacing:0;
  --spectrum-assetcard-content-text-color:var(--spectrum-gray-700);
  --spectrum-assetcard-content-font-family:var(--spectrum-sans-font-family-stack);
  --spectrum-assetcard-content-font-weight:var(--spectrum-body-sans-serif-font-weight);
  --spectrum-assetcard-content-font-style:var(--spectrum-default-font-style);
  --spectrum-assetcard-content-line-height:var(--spectrum-line-height-200);
  --spectrum-assetcard-content-letter-spacing:0;

  --spectrum-assetcard-content-margin-block-start:var(--spectrum-spacing-75);
}

.spectrum-AssetCard:lang(zh), .spectrum-AssetCard:lang(ja), .spectrum-AssetCard:lang(ko){
		--spectrum-assetcard-title-font-family:var(--spectrum-cjk-font-family-stack);
		--spectrum-assetcard-title-font-style:var(--spectrum-heading-cjk-font-style);
		--spectrum-assetcard-title-font-weight:var(--spectrum-heading-cjk-font-weight);
		--spectrum-assetcard-title-font-size:var(--spectrum-heading-cjk-size-xs);
    --spectrum-assetcard-title-line-height:var(--spectrum-heading-cjk-line-height);
		--spectrum-assetcard-title-letter-spacing:var(--spectrum-cjk-letter-spacing);

		--spectrum-assetcard-header-content-font-family:var(--spectrum-cjk-font-family-stack);
		--spectrum-assetcard-header-content-font-weight:var(--spectrum-body-cjk-font-weight);
		--spectrum-assetcard-header-content-line-height:var(--spectrum-body-cjk-line-height);
		--spectrum-assetcard-header-content-font-style:var(--spectrum-body-cjk-font-style);
		--spectrum-assetcard-header-content-letter-spacing:var(--spectrum-cjk-letter-spacing);

		--spectrum-assetcard-content-font-family:var(--spectrum-cjk-font-family-stack);
		--spectrum-assetcard-content-font-weight:var(--spectrum-body-cjk-font-weight);
		--spectrum-assetcard-content-line-height:var(--spectrum-body-cjk-line-height);
		--spectrum-assetcard-content-font-style:var(--spectrum-body-cjk-font-style);
		--spectrum-assetcard-content-letter-spacing:var(--spectrum-cjk-letter-spacing);
	}

.spectrum-AssetCard{
  position:relative;

  display:flex;
  flex-direction:column;

  inline-size:var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size));

  cursor:pointer;

  outline:none;
}

.spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer::after, .spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer::after,
.spectrum-AssetCard.is-focus-visible .spectrum-AssetCard-assetContainer::after{
      border-color:var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover)));
    }

.spectrum-AssetCard.is-selected .spectrum-Checkbox-box::before,.spectrum-AssetCard:focus-visible .spectrum-Checkbox-box::before,
.spectrum-AssetCard.is-focus-visible .spectrum-Checkbox-box::before{
      border-color:var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover)));
    }

.spectrum-AssetCard:active .spectrum-AssetCard-assetContainer::after,
.spectrum-AssetCard.is-active .spectrum-AssetCard-assetContainer::after{
      border-color:var(--mod-assetcard-border-color-down, var(--spectrum-assetcard-border-color-down));
    }

.spectrum-AssetCard:focus-visible .spectrum-AssetCard-assetContainer::before,
.spectrum-AssetCard.is-focus-visible .spectrum-AssetCard-assetContainer::before{
      opacity:1;
    }

.spectrum-AssetCard-assetContainer{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  inline-size:var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size));
  block-size:var(--mod-assetcard-asset-size, var(--spectrum-assetcard-asset-size));

  border-radius:var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius));

  background-color:var(--mod-assetcard-background-color, var(--spectrum-assetcard-background-color));

  transition:border var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
}

.spectrum-AssetCard-assetContainer::before{
    content:'';

    position:absolute;
    inset:calc(-1 * var(--mod-assetcard-focus-ring-gap, var(--spectrum-assetcard-focus-ring-gap)));

    border:var(--mod-assetcard-focus-indicator-thickness, var(--spectrum-assetcard-focus-indicator-thickness)) solid var(--mod-assectcard-focus-indicator-color, var(--spectrum-assestcard-focus-indicator-color));

    border-radius:var(--mod-assetcard-focus-ring-border-radius, var(--spectrum-assetcard-focus-ring-border-radius));

    opacity:0;
    pointer-events:none;
    transition:opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
  }

.spectrum-AssetCard-assetContainer::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:3;

    border:var(--mod-assetcard-asset-container-border-size, var(--spectrum-assetcard-asset-container-border-size)) solid var(--mod-assetcard-border-color, var(--spectrum-assetcard-border-color));
    border-radius:calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px);
  }

.spectrum-AssetCard-asset{
  object-fit:contain;

  inline-size:100%;
  block-size:100%;

  transition:inline-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out, block-size var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;

  border-radius:calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px);
}

.spectrum-AssetCard-header{
  display:flex;
  flex-direction:row;
  align-items:center;
  margin-block-start:var(--mod-assetcard-header-margin-block-start, var(--spectrum-assetcard-header-margin-block-start));
}

.spectrum-AssetCard-title{
  flex-grow:1;

  color:var(--mod-assetcard-title-text-color, var(--spectrum-assetcard-title-text-color));

  font-family:var(--mod-assetcard-title-font-family, var(--spectrum-assetcard-title-font-family));
  font-weight:var(--mod-assetcard-title-font-weight, var(--spectrum-assetcard-title-font-weight));
  font-size:var(--mod-assetcard-title-font-size, var(--spectrum-assetcard-title-font-size));
  line-height:var(--mod-assetcard-title-line-height, var(--spectrum-assetcard-title-line-height));
  font-style:var(--mod-assetcard-title-font-style, var(--spectrum-assetcard-title-font-style));
  letter-spacing:var(--mod-assetcard-title-letter-spacing, var(--spectrum-assetcard-title-letter-spacing));
}

.spectrum-AssetCard-headerContent{
  color:var(--mod-assetcard-header-content-text-color, var(--spectrum-assetcard-header-content-text-color));

  font-family:var(--mod-assetcard-header-content-font-family, var(--spectrum-assetcard-header-content-font-family));
  font-size:var(--mod-assetcard-header-content-font-size, var(--spectrum-assetcard-header-content-font-size));
  font-weight:var(--mod-assetcard-header-content-font-weight, var(--spectrum-assetcard-header-content-font-weight));
  line-height:var(--mod-assetcard-header-content-line-height, var(--spectrum-assetcard-header-content-line-height));
  font-style:var(--mod-assetcard-header-content-font-stlye, var(--spectrum-assetcard-header-content-font-style));
  letter-spacing:var(--mod-assetcard-header-content-letter-spacing, var(--spectrum-assetcard-header-content-letter-spacing));
}

.spectrum-AssetCard-content{
  flex-grow:1;
  margin-block-start:var(--mod-assetcard-content-margin-block-start, var(--spectrum-assetcard-content-margin-block-start));

  color:var(--mod-assetcard-content-text-color, var(--spectrum-assetcard-content-text-color));

  font-family:var(--mod-assetcard-content-font-family, var(--spectrum-assetcard-content-font-family));
  font-size:var(--mod-assetcard-content-font-size, var(--spectrum-assetcard-content-font-size));
  font-weight:var(--mod-assetcard-content-font-weight, var(--spectrum-assetcard-content-font-weight));
  line-height:var(--mod-assetcard-content-line-height, var(--spectrum-assetcard-content-line-height));
  font-style:var(--mod-assetcard-content-font-style, var(--spectrum-assetcard-content-font-style));
  letter-spacing:var(--mod-assetcard-content-letter-spacing, var(--spectrum-assetcard-content-letter-spacing));
}

.spectrum-AssetCard-selectionOverlay{
  position:absolute;
  z-index:1;
  inset:0;

  background-color:transparent;

  pointer-events:none;
  transition:background-color var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;

  border-radius:calc(var(--mod-assetcard-border-radius, var(--spectrum-assetcard-border-radius)) - 1px);
}

.spectrum-AssetCard-selectionIndicator{
  position:absolute;
  z-index:2;
  inset-inline-start:var(--mod-assetcard-selectionindicator-margin, var(--spectrum-assetcard-selectionindicator-margin));
  inset-block-start:var(--mod-assetcard-selectionindicator-margin, var(--spectrum-assetcard-selectionindicator-margin));

  display:none;
  align-items:center;
  justify-content:center;

  inline-size:var(--mod-assetcard-selectionindicator-size, var(--spectrum-assetcard-selectionindicator-size));
  block-size:var(--mod-assetcard-selectionindicator-size, var(--spectrum-assetcard-selectionindicator-size));

  border-radius:var(--mod-assetcard-selectionindicator-border-radius, var(--spectrum-assetcard-selectionindicator-border-radius));

  box-shadow:0 var(--spectrum-assetcard-selectionindicator-offset-y) var(--spectrum-assetcard-selectionindicator-blur) rgba(0, 0, 0, 0.15);

  color:var(--highcontrast-assetcard-selectionindicator-color, var(--mod-assetcard-selectionindicator-color, var(--spectrum-assetcard-selectionindicator-color)));
  font-weight:var(--mod-assetcard-selectionindicator-font-weight, var(--spectrum-assetcard-selectionindicator-font-weight));
  font-size:var(--mod-assetcard-selectionindicator-font-size, var(--spectrum-assetcard-selectionindicator-font-size));

  transition:opacity var(--mod-assetcard-asset-animation-duration, var(--spectrum-assetcard-asset-animation-duration)) ease-in-out;
  background-color:transparent;
}

.spectrum-AssetCard-selectionOrder{
  line-height:0;
}

.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-assetContainer::after, .spectrum-AssetCard.is-selected .spectrum-AssetCard-assetContainer::after{
    border-color:var(--highcontrast-assetcard-border-color-selected, var(--mod-assetcard-border-color-selected, var(--spectrum-assetcard-border-color-selected)));
  }

.spectrum-AssetCard.is-drop-target .spectrum-AssetCard-selectionOverlay, .spectrum-AssetCard.is-selected .spectrum-AssetCard-selectionOverlay{
    background-color:var(--mod-assetcard-overlay-background-color, var(--spectrum-assetcard-overlay-background-color));
  }

.spectrum-AssetCard.is-drop-target:active .spectrum-AssetCard-assetContainer::after, .spectrum-AssetCard.is-selected:active .spectrum-AssetCard-assetContainer::after,
.spectrum-AssetCard.is-drop-target.is-active .spectrum-AssetCard-assetContainer::after,
.spectrum-AssetCard.is-selected.is-active .spectrum-AssetCard-assetContainer::after{
      border-color:var(--highcontrast-assectcard-border-color-selected-down, var(--mod-assectcard-border-color-selected-down, var(--spectrum-assetcard-border-color-selected-down)));
    }

.spectrum-AssetCard--highlightSelection.is-selected .spectrum-AssetCard-asset{
      inline-size:90%;
      block-size:90%;
      border-radius:0;
    }

.spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator{
    background-color:var(--mod-assetcard-selectionindicator-background-color-default, var(--spectrum-assetcard-selectionindicator-background-color-default));
  }

.spectrum-AssetCard--checkboxSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-selectionOrder{
      display:none;
    }

.spectrum-AssetCard--checkboxSelection.is-selected .spectrum-AssetCard-selectionIndicator, .spectrum-AssetCard--checkboxSelection:focus-visible .spectrum-AssetCard-selectionIndicator,
.spectrum-AssetCard--checkboxSelection.is-focus-visible .spectrum-AssetCard-selectionIndicator{
      display:flex;
      pointer-events:all;
    }

@media (hover: hover){

.spectrum-AssetCard:hover .spectrum-AssetCard-assetContainer::after,
.spectrum-AssetCard.is-hover .spectrum-AssetCard-assetContainer::after{
      border-color:var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover)));
    }

.spectrum-AssetCard:hover .spectrum-Checkbox-box::before,
.spectrum-AssetCard.is-hover .spectrum-Checkbox-box::before{
      border-color:var(--highcontrast-assetcard-border-color-hover, var(--mod-assetcard-border-color-hover, var(--spectrum-assetcard-border-color-hover)));
    }

.spectrum-AssetCard.is-drop-target:hover .spectrum-AssetCard-assetContainer::after, .spectrum-AssetCard.is-selected:hover .spectrum-AssetCard-assetContainer::after,
.spectrum-AssetCard.is-drop-target.is-hover .spectrum-AssetCard-assetContainer::after,
.spectrum-AssetCard.is-selected.is-hover .spectrum-AssetCard-assetContainer::after{
      border-color:var(--highcontrast-assetcard-border-color-selected-hover, var(--mod-assetcard-border-color-selected-hover, var(--spectrum-assetcard-border-color-selected-hover)));
    }

.spectrum-AssetCard--checkboxSelection:hover .spectrum-AssetCard-selectionIndicator,
.spectrum-AssetCard--checkboxSelection.is-hover .spectrum-AssetCard-selectionIndicator{
      display:flex;
      pointer-events:all;
    }
}

.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator{
    background-color:var(--highcontrast-assetcard-selectionindicator-background-color-ordered, var(--mod-assetcard-selectionindicator-background-color-ordered, var(--spectrum-assetcard-selectionindicator-background-color-ordered)));
  }

.spectrum-AssetCard--orderedSelection .spectrum-AssetCard-selectionIndicator .spectrum-AssetCard-checkbox{
      display:none;
    }

.spectrum-AssetCard--orderedSelection.is-selected .spectrum-AssetCard-selectionIndicator{
      display:flex;
      pointer-events:all;
    }

@media (forced-colors: active){
  .spectrum-AssetCard{
    --highcontrast-assetcard-border-color-hover:Highlight;
    --highcontrast-assetcard-border-color-selected:Highlight;
    --highcontrast-assetcard-border-color-selected-hover:Highlight;
    --highcontrast-assectcard-border-color-selected-down:Highlight;
    --highcontrast-assetcard-selectionindicator-background-color-ordered:Highlight;
    --highcontrast-assetcard-selectionindicator-color:SelectedItemText;
  }

    .spectrum-AssetCard .spectrum-AssetCard-selectionOrder{
      forced-color-adjust:none;
    }
}

.spectrum-AssetCard{
  --spectrum-assetcard-overlay-background-color:var(--system-spectrum-assetcard-overlay-background-color);
}
