@use "../vars" as *;
@use "./material" as material;

@mixin input-generic {
	border-width: 2px;
	border-radius: 4px;
	border-style: solid;
	border-color: black;
	font-family: $input-font;
	box-shadow: none;

	&:focus,
	&:active {
		transform: scale(103%);
	}
}

@mixin sub-nav($parent, $group, $display) {
	nav.#{$group} {
		@include material.elevate(1);
		display: none;
	}
	&:has(nav.#{$parent} .active[data-tab="#{$group}"]) nav.#{$group} {
		display: #{$display};
	}
}