@import "../partials/clean/constants"
@import "../partials/context_button"

support-outfit-viewer
	display: flex
	gap: 2em
	flex-wrap: wrap
	justify-content: center

	outfit-viewer
		flex: 0 0 auto
		border: 1px solid $module-border-color
		border-radius: 1em

	.outfit-viewer-controls
		margin-block: .5em
		isolation: isolate // Avoid z-index weirdness with our buttons vs the lens

		display: flex
		align-items: center
		justify-content: center
		gap: .5em

		font-size: .85em

		fieldset
			display: contents

		legend
			font-weight: bold
			&::after
				content: ":"

		label
			display: flex
			align-items: center
			gap: .25em

			input[type=radio]
				margin: 0

		[type=submit]
			+context-button

	> table
		flex: 0 0 auto
		border-collapse: collapse
		table-layout: fixed
		border-radius: .5em

		th, td
			border: 1px solid $module-border-color
			font-size: .85em
			padding: .25em .5em
			text-align: left

		> tbody
			[data-field=links]
				ul
					list-style-type: none
					display: flex
					gap: .5em

	// Once the component is ready, add some hints about potential interactions.
	&:state(ready)
		> table
			> tbody > tr
				cursor: zoom-in
				&:hover
					background: $module-bg-color

	magic-magnifier
		--magic-magnifier-lens-width: 100px
		--magic-magnifier-lens-height: 100px
		--magic-magnifier-scale: 2.5

	magic-magnifier-lens
		z-index: 2 // Be above things by default, but not by much!