// New Font Strcture
@mixin title-overline {
	font-family: 'Public Sans';
	font-size: 12px;
	line-height: 15.6px;
	font-weight: 300;
}
@mixin title-large {
	font-family: 'Public Sans';
	font-size: 23px;
	line-height: 33.35px;
	font-weight: 600;
}
@mixin title-medium {
	font-family: 'Public Sans';
	font-size: 18px;
	line-height: 25.56px;
	letter-spacing: 0.005em;
	font-weight: 600;
}
@mixin title-small {
	font-family: 'Public Sans';
	font-size: 15px;
	line-height: 21px;
	letter-spacing: 0.005em;
	font-weight: 500;
}
@mixin function-title {
	font-family: 'Public Sans';
	font-size: 13px;
	line-height: 18.2px;
	letter-spacing: 0;
	font-weight: 500;
}
@mixin function-title-light {
	font-family: 'Public Sans';
	font-size: 13px;
	line-height: 18.2px;
	letter-spacing: 0;
	font-weight: 300;
}
@mixin function-description {
	font-family: 'Public Sans';
	font-size: 12px;
	line-height: 15.6px;
	font-weight: 300;
}
@mixin function-description-important {
	font-family: 'Public Sans' !important;
	font-size: 12px !important;
	line-height: 15.6px !important;
	font-weight: 300 !important;
}
@mixin function-value {
	font-family: 'Public Sans';
	font-size: 12px;
	line-height: 15.6px;
	font-weight: 600;
}
@mixin field-description {
	font-family: 'Public Sans';
	font-size: 10px;
	line-height: 14px;
	letter-spacing: 0.006em;
	font-weight: 300;
}
@mixin field-description-tiny {
	font-family: 'Public Sans';
	font-size: 8px;
	line-height: 12.8px;
	letter-spacing: 0.03em;
	font-weight: 400;
}

@mixin shadow-large {
	filter: drop-shadow(0px 5px 20px rgba(42, 42, 42, 0.05));
}
@mixin shadow-small {
	filter: drop-shadow(0px 2px 8px rgba(42, 42, 42, 0.05));
}

// Mixin
@mixin clickable {
	user-select: none;
	cursor: pointer;
}

@mixin transition($transitions...) {
	// $r-easing: cubic-bezier(0.445, 0.050, 0.550, 0.950);
	$r-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);

	// $transitions: append($transitions comma);
	$s: 0.1s;
	$unfoldedTransitions: ();
	@each $transition in $transitions {
		$unfoldedTransitions: append(
			$unfoldedTransitions,
			$transition + ' ' + $s,
			comma
		);
	}
	transition: $unfoldedTransitions;
	transition-timing-function: $r-easing;
}

@mixin input {
	background: none;
	border: 0;
	height: 40px;
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--fields-light-disabled);
	padding-left: 20px;
	border-radius: 5px;

	@include function-description;
	@include transition(color, border-color);

	&:hover,
	&:active,
	&:focus {
		color: var(--base-charcoal);
		border-color: var(--base-charcoal);
		outline: 0;
		box-shadow: none;
	}
}

@function rem-calc($value) {
	@return #{$value / 16 + 'rem'};
}
