@use 'sass:map';

// context
@use 'context' as *;

// components
@use 'components';

// utilities
@use 'utilities';

@include layer(preflight, $use-css-layers, $layer-prefix) {
@if $preflight {
	:where(.preflight) {
		:not(.preflight-revert *) {
			// typography
			&:where(h1, h2, h3, h4, h5, h6) {
				@extend %vv-text !optional;
				@extend %vv-text--headline !optional;
			}

			&:where(h1) {
				@extend %vv-text--size-1 !optional;
			}

			&:where(h2) {
				@extend %vv-text--size-2 !optional;
			}

			&:where(h3) {
				@extend %vv-text--size-3 !optional;
			}

			&:where(h4) {
				@extend %vv-text--size-4 !optional;
			}

			&:where(h5) {
				@extend %vv-text--size-5 !optional;
			}

			&:where(h6) {
				@extend %vv-text--size-6 !optional;
			}

			&:where(p) {
				@extend %vv-text !optional;
				@extend %vv-text--copy !optional;
				@extend %overflow-hidden !optional;
				@extend %text-ellipsis !optional;
			}

			&:where(blockquote) {
				@extend %vv-text !optional;
				@extend %vv-text--quote !optional;
			}

			&:where(ul, ol) {
				@extend %list-inside !optional;
				@extend %my-sm !optional;
				@extend %pl-lg !optional;
			}

			&:where(ul) {
				@extend %list-disc !optional;
			}

			&:where(ol, ol[type='1']) {
				@extend %list-decimal !optional;
			}

			&:where(ol[type='a']) {
				@extend %list-lower-latin !optional;
			}

			&:where(ol[type='A']) {
				@extend %list-upper-latin !optional;
			}

			&:where(ol[type='i']) {
				@extend %list-lower-roman !optional;
			}

			&:where(ol[type='I']) {
				@extend %list-upper-roman !optional;
			}

			&:where(li > p) {
				@extend %inline !optional;
			}

			&:where(b, strong, th) {
				@extend %font-bold !optional;
			}

			&:where(em, i, cite, dfn, var) {
				@extend %italic !optional;
			}

			&:where(svg) {
				@extend %align-middle !optional;
			}

			&:where(dfn, var) {
				@extend %font-serif !optional;
			}

			&:where(del, s) {
				@extend %line-through !optional;
			}

			&:where(ins, u, cite) {
				@extend %underline !optional;
			}

			&:where(abbr) {
				@extend %underline !optional;
				@extend %decoration-dotted !optional;
				@extend %cursor-help !optional;
			}

			&:where(code) {
				@extend %font-mono !optional;
			}

			&:where(p > code) {
				@extend %whitespace-nowrap !optional;
			}

			&:where(sub) {
				@extend %align-sub !optional;
				@extend %text-smaller !optional;
			}

			&:where(sup) {
				@extend %align-super !optional;
				@extend %text-smaller !optional;
			}

			&:where(q) {
				@extend %font-serif !optional;
			}

			&:where(small) {
				@extend %text-smaller !optional;
			}

			&:where(mark) {
				@extend %bg-warning !optional;
			}

			&:where(pre) {
				@extend %font-mono !optional;
				@extend %whitespace-pre !optional;
			}

			&:where(dl) {
				@extend %my-sm !optional;
			}

			&:where(dd) {
				@extend %ml-sm !optional;
			}

			&:where(hr) {
				@extend %my-lg !optional;
				@extend %border !optional;
				@extend %border-solid !optional;
				@extend %border-surface-3 !optional;
			}

			// anchor
			&:where(a:not(.#{map.get($components-names, vv-button)})) {
				@extend %vv-text !optional;
				@extend %vv-text--link !optional;

				&:where(:hover) {
					@extend %vv-button-modifier-link--hover !optional;
				}

				&:where(:focus) {
					@extend %vv-button-modifier-link--focus !optional;
				}

				&:where(:focus-visible) {
					@extend %vv-button-modifier-link--focus-visible !optional;
				}

				&:where(:visited) {
					@extend %vv-button-modifier-link--visited !optional;
				}

				&:where(:active) {
					@extend %vv-button-modifier-link--active !optional;
				}
			}

			// buttons
			&:where(
					button,
					input[type='button'],
					input[type='submit'],
					input[type='reset']
				) {
				@extend %vv-button !optional;

				&:where([type='button']) {
					@extend %vv-button--primary !optional;
				}

				&:where([type='reset']) {
					@extend %vv-button--secondary !optional;
				}

				&:where(:disabled) {
					@extend %vv-button--disabled !optional;
				}

				&:where(:hover) {
					@extend %vv-button--hover !optional;
				}

				&:where(:focus) {
					@extend %vv-button--focus !optional;
				}

				&:where(:focus-visible) {
					@extend %vv-button--focus-visible !optional;
				}

				&:where(:visited) {
					@extend %vv-button--visited !optional;
				}

				&:where(:active) {
					@extend %vv-button--active !optional;
				}

				&
					+ :where(
						button,
						input[type='button'],
						input[type='submit'],
						input[type='reset']
					) {
					@extend %ml-sm !optional;
				}
			}

			// table
			&:where(table) {
				@extend %vv-table !optional;
				@extend %vv-table--bordered !optional;

				:where(tr) {
					@extend %vv-table__tr !optional;
				}

				:where(td) {
					@extend %vv-table__td !optional;
					@extend %vv-table-modifier-bordered__td !optional;
				}

				:where(th) {
					@extend %vv-table__th !optional;
					@extend %vv-table-modifier-bordered__th !optional;
				}

				:where(caption) {
					@extend %vv-table__caption !optional;
				}
			}

			// progress
			&:where(progress) {
				@extend %vv-progress !optional;
			}

			// checkbox
			&:where(fieldset:has(input[type='checkbox'])) {
				@extend %vv-checkbox-group !optional;

				:where(legend) {
					@extend %vv-checkbox-group__legend !optional;
				}
			}

			&:where(label:has(input[type='checkbox'])) {
				@extend %w-full !optional;
				@extend %vv-checkbox !optional;

				:where(input[type='checkbox']) {
					@extend %vv-checkbox__input !optional;

					&:checked {
						@extend %vv-checkbox-element-input--checked !optional;
					}

					&:indeterminate {
						@extend %vv-checkbox-element-input--indeterminate
								!optional;
					}

					&:focus-visible {
						@extend %vv-checkbox-element-input--focus-visible
								!optional;
					}
				}
			}

			// switch
			&:where(label:has(input[type='checkbox'][role='switch'])) {
				@extend %vv-checkbox--switch !optional;

				:where(input[type='checkbox'][role='switch']) {
					@extend %vv-checkbox-modifier-switch__input !optional;

					&:hover {
						@extend %vv-checkbox-modifier-switch-element-input--hover
								!optional;
					}

					&:active {
						@extend %vv-checkbox-modifier-switch-element-input--active
								!optional;
					}

					&:checked {
						@extend %vv-checkbox-modifier-switch-element-input--checked
								!optional;
					}

					&:focus-visible {
						@extend %vv-checkbox-modifier-switch-element-input--focus-visible
								!optional;
					}
				}
			}

			&:where(label:has(input[type='checkbox']:disabled)) {
				@extend %vv-checkbox--disabled !optional;
			}

			// radio
			&:where(fieldset:has(input[type='radio'])) {
				@extend %vv-radio-group !optional;

				:where(legend) {
					@extend %vv-radio-group__legend !optional;
				}
			}

			&:where(label:has(input[type='radio'])) {
				@extend %w-full !optional;
				@extend %vv-radio !optional;

				:where(input[type='radio']) {
					@extend %vv-radio__input !optional;

					&:checked {
						@extend %vv-radio-element-input--checked !optional;
					}

					&:focus-visible {
						@extend %vv-radio-element-input--focus-visible
								!optional;
					}
				}
			}

			&:where(label:has(input[type='radio']:disabled)) {
				@extend %vv-radio--disabled !optional;
			}

			// textarea
			&:where(label:has(+ textarea)) {
				@extend %vv-textarea__label !optional;
			}

			&:where(textarea) {
				@extend %w-full !optional;
				@extend %vv-textarea !optional;
				@extend %vv-textarea__wrapper !optional;
				@extend %vv-textarea__input !optional;

				&:disabled {
					@extend %vv-textarea--disabled !optional;
				}

				&:read-only {
					@extend %vv-textarea--readonly !optional;
				}
			}

			// select
			&:where(label:has(+ select)) {
				@extend %vv-select__label !optional;
			}

			&:where(select) {
				@extend %w-full !optional;
				@extend %vv-select !optional;
				@extend %vv-select__wrapper !optional;
				@extend %vv-select__input !optional;
				@extend %vv-select-modifier-dirty__input !optional;

				&:disabled {
					@extend %vv-select--disabled !optional;
				}
			}

			// input text
			&:where(
					label:has(
							+ input:not(
									[type='radio'],
									[type='checkbox'],
									[type='button'],
									[type='submit'],
									[type='reset']
								)
						)
				) {
				@extend %vv-input-text__label !optional;
			}

			&:where(
					input:not(
							[type='radio'],
							[type='checkbox'],
							[type='button'],
							[type='submit'],
							[type='reset']
						)
				) {
				@extend %w-full !optional;
				@extend %vv-input-text !optional;
				@extend %vv-input-text__wrapper !optional;
				@extend %vv-input-text__input !optional;

				&:disabled {
					@extend %vv-input-text--disabled !optional;
				}

				&:read-only {
					@extend %vv-input-text--readonly !optional;
				}
			}
		}
	}
}
}