.tify {
	background: $main-bg;
	box-sizing: border-box;
	color: $text-color;
	color-scheme: light dark;
	container-type: size;
	display: flex;
	flex-direction: column;
	font-size: $font-size;
	height: 100%;
	line-height: $line-height;
	min-height: 240px;
	min-width: 240px;
	overflow: hidden;
	position: relative;
	-webkit-tap-highlight-color: transparent;
	text-wrap: balance;

	&.-light {
		color-scheme: light;
	}

	&.-dark {
		color-scheme: dark;
	}

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}

	// For communicating container size to JS
	&::after {
		pointer-events: none;
		position: absolute;
		visibility: hidden;

		@container (#{$small}) {
			content: 'small';
		}

		@container (#{$medium}) {
			content: 'small medium';
		}

		@container (#{$large}) {
			content: 'small medium large';
		}
	}

	a:not([class]) {
		color: $link-color;
		word-wrap: break-word;

		&:focus,
		&:hover {
			color: $link-hover-color;
		}
	}

	b {
		font-weight: bold;
	}

	h3 {
		align-items: baseline;
		color: $text-color-muted;
		display: flex;
		font-size: $font-size-small;
		font-weight: bold;
		gap: .5em;
		letter-spacing: .1em;
		margin: 0 0 g(.5);
		padding: 0;
		text-transform: uppercase;

		&::after {
			background: $border-color;
			content: '';
			flex: 1;
			height: 1px;
		}
	}

	h4 {
		color: $text-color-muted;
		font-size: 1em;
		font-weight: normal;
		margin: 0;
		padding: 0;

		&:nth-of-type(n + 2) {
			margin-top: g(.5);
		}
	}

	label {
		cursor: pointer;
		font-size: inherit;
		font-weight: normal;
	}

	p {
		margin: 0 0 g(.5);
		padding: 0;
	}

	[type=range] {
		@include range;
	}

	[type=text] {
		@include input;
	}
}