@use '../../scss/theming' as *;

@mixin daff-media-gallery-theme($theme) {
	$neutral: daff-get-palette($theme, neutral);
	$white: daff-get-base-color($theme, 'white');
	$mode: daff-get-theme-mode($theme);

	.daff-media-gallery {
		$root: &;

		@include light($mode) {
			.daff-thumbnail {
				background: daff-color($neutral, 20);

				&.daff-selected {
					border: 1px solid daff-color($neutral);
				}
			}
		}

		@include dark($mode) {
			.daff-thumbnail {
				background: daff-color($neutral, 70);

				&.daff-selected {
					border: 1px solid daff-color($neutral, 30);
				}
			}
		}

		.daff-thumbnail {
			border: 1px solid transparent;
		}

		&.daff-skeleton {
			.daff-thumbnail {
				&.daff-selected {
					border: none;
				}
			}
		}

		&__video-button {
			border: solid thin $white;

			&::after {
				background-color: $white;
			}
		}
	}
}