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

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

	> 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