/*!
 * Copyright 2024 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.
 */

@import "./themes/spectrum-two.css";

.spectrum-Thumbnail,
.spectrum-Thumbnail--size500 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-500);
}

.spectrum-Thumbnail--size50 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-50);
}

.spectrum-Thumbnail--size75 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-75);
}

.spectrum-Thumbnail--size100 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-100);
}

.spectrum-Thumbnail--size200 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-200);
}

.spectrum-Thumbnail--size300 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-300);
}

.spectrum-Thumbnail--size400 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-400);
}

.spectrum-Thumbnail--size600 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-600);
}

.spectrum-Thumbnail--size700 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-700);
}

.spectrum-Thumbnail--size800 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-800);
}

.spectrum-Thumbnail--size900 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-900);
}

.spectrum-Thumbnail--size1000 {
	--spectrum-thumbnail-sized-size: var(--spectrum-thumbnail-size-1000);
}

.spectrum-Thumbnail {
	--spectrum-thumbnail-size: var(--mod-thumbnail-size, var(--spectrum-thumbnail-sized-size));

	/* @todo Refactor with --spectrum-thumbnail-border-color once gray rgb token is no longer necessary to workaround nested rgb color token value using rgba(). */
	--spectrum-thumbnail-border-color: var(--highcontrast-thumbnail-border-color, var(--mod-thumbnail-border-color, rgb(var(--spectrum-gray-800-rgb), var(--spectrum-thumbnail-border-opacity))));
	--spectrum-thumbnail-border-color-selected: var(--highcontrast-thumbnail-border-color-selected, var(--mod-thumbnail-border-color-selected, var(--spectrum-accent-color-800)));
	--spectrum-thumbnail-border-width: var(--mod-thumbnail-border-width, var(--spectrum-border-width-100));
	--spectrum-thumbnail-border-width-selected: var(--mod-thumbnail-border-width-selected, var(--spectrum-border-width-200));
	--spectrum-thumbnail-border-radius-default: var(--mod-thumbnail-border-radius, var(--spectrum-thumbnail-border-radius));

	--spectrum-thumbnail-layer-border-color-inner: var(--highcontrast-thumbnail-layer-border-color-inner, var(--mod-thumbnail-layer-border-color-inner, var(--spectrum-white)));
	--spectrum-thumbnail-layer-border-color-outer: var(--highcontrast-thumbnail-layer-border-color-outer, var(--mod-thumbnail-layer-border-color-outer, var(--spectrum-gray-500)));
	--spectrum-thumbnail-layer-border-width-inner: var(--mod-thumbnail-layer-border-width-inner, var(--spectrum-border-width-400));
	--spectrum-thumbnail-layer-border-width-outer: var(--mod-thumbnail-layer-border-width-outer, var(--spectrum-border-width-100));

	--spectrum-thumbnail-focus-indicator-thickness: var(--mod-thumbnail-focus-indicator-thickness, var(--spectrum-focus-indicator-thickness));
	--spectrum-thumbnail-focus-indicator-gap: var(--mod-thumbnail-focus-indicator-gap, var(--spectrum-focus-indicator-gap));
	--spectrum-thumbnail-focus-indicator-color: var(--highcontrast-thumbnail-focus-indicator-color, var(--mod-thumbnail-focus-indicator-color, var(--spectrum-focus-indicator-color)));

	--spectrum-thumbnail-color-opacity-disabled: var(--spectrum-thumbnail-opacity-disabled);

	position: relative;
	margin: 0;
	padding: 0;
	display: block;

	inline-size: var(--spectrum-thumbnail-size);
	block-size: var(--spectrum-thumbnail-size);

	border-radius: var(--spectrum-thumbnail-border-radius-default);

	overflow: hidden;
	z-index: 0;

	&::before {
		content: "";
		z-index: 2;
		position: absolute;
		inline-size: 100%;
		block-size: 100%;
		border-radius: var(--spectrum-thumbnail-border-radius-default);
		box-shadow: inset 0 0 0 var(--spectrum-thumbnail-border-width) var(--spectrum-thumbnail-border-color);
	}

	&.is-disabled {
		opacity: var(--mod-thumbnail-color-opacity-disabled, var(--spectrum-thumbnail-color-opacity-disabled));
	}

	&.is-focused {
		overflow: visible;

		&::after {
			content: "";
			border-style: solid;
			border-width: var(--spectrum-thumbnail-focus-indicator-thickness);
			border-color: var(--spectrum-thumbnail-focus-indicator-color);
			border-radius: var(--spectrum-thumbnail-border-radius-default);
			position: absolute;
			inset-inline-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
			inset-inline-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
			inset-block-end: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
			inset-block-start: calc((var(--spectrum-thumbnail-focus-indicator-gap) + var(--spectrum-thumbnail-focus-indicator-thickness)) * -1);
		}

		.spectrum-Thumbnail-image-wrapper {
			overflow: hidden;
			border-radius: var(--spectrum-thumbnail-border-radius-default);
		}
	}
}

.spectrum-Thumbnail-layer {
	border-style: solid;
	border-width: var(--spectrum-thumbnail-layer-border-width-outer);
	border-color: var(--spectrum-thumbnail-layer-border-color-outer);
	box-sizing: border-box;

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

	&::before {
		content: none;
	}

	&.is-selected {
		outline-style: solid;
		outline-color: var(--spectrum-thumbnail-border-color-selected);
		outline-width: var(--spectrum-thumbnail-border-width-selected);
		outline-offset: calc(var(--spectrum-thumbnail-border-width-selected) - var(--spectrum-thumbnail-layer-border-width-inner));
	}
}

.spectrum-Thumbnail-layer-inner {
	display: flex;
	align-items: center;
	justify-content: center;

	inline-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
	block-size: calc(var(--spectrum-thumbnail-size) - var(--spectrum-thumbnail-layer-border-width-inner) * 2);
	outline-style: solid;
	outline-color: var(--spectrum-thumbnail-layer-border-color-inner);
	outline-width: calc(var(--spectrum-thumbnail-layer-border-width-inner) - var(--spectrum-thumbnail-layer-border-width-outer));
}

.spectrum-Thumbnail-image-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	block-size: 100%;
}

.spectrum-Thumbnail-image {
	position: relative;
	max-inline-size: 100%;
	max-block-size: 100%;
	z-index: 1;
}

.spectrum-Thumbnail--cover {
	.spectrum-Thumbnail-image {
		block-size: 100%;
		inline-size: 100%;
		object-fit: cover;
		object-position: center;
	}
}

.spectrum-Thumbnail-background {
	position: absolute;
	z-index: 0;
	inset-inline-start: 0;
	inset-block-start: 0;
	inset-inline-end: 0;
	inset-block-end: 0;
	block-size: 100%;
	inline-size: 100%;
	background-size: cover;
	background-position: center center;
	border-radius: var(--spectrum-thumbnail-border-radius-default);
}

/* Windows High Contrast Mode */
@media (forced-colors: active) {
	.spectrum-Thumbnail {
		--highcontrast-thumbnail-border-color-selected: Highlight;
		--highcontrast-thumbnail-focus-indicator-color: Highlight;
		--highcontrast-thumbnail-border-color: CanvasText;
		--highcontrast-thumbnail-layer-border-color-inner: Canvas;
		--highcontrast-thumbnail-layer-border-color-outer: CanvasText;

		/* Allow checkerboard pattern to be visible. */
		forced-color-adjust: none;
	}
}
