@mixin btn {
	border-radius: var(--btn-radius);
	padding: 4px 10px;
	line-height: 20px;
	font-size: var(--font-size-sm);
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	text-decoration: none;
}

@mixin btnSecondary {
	background: var(--btn-bg);
	font-weight: var(--font-weight-regular);
	color: var(--text-primary);
	box-shadow: none !important;
	border: 1px solid var(--btn-border-x);
	border-top-color: var(--btn-border-t);
	border-bottom-color: var(--btn-border-b);
	cursor: var(--cursor);
	&:hover {
		background: var(--btn-bg-hover);
		border-color: var(--btn-border-t) var(--btn-border-x) var(--btn-border-b);
	}
	&:active {
		background: var(--btn-bg-active) !important;
		border-color: var(--btn-border-active);
	}
}

@mixin btnPrimary {
	background: var(--accent);
	color: var(--accent-text);
	transition: box-shadow 0.15s var(--transition);
	font-weight: var(--font-weight-semibold);
	border: 1px solid var(--btn-border-x);
	border-top-color: var(--btn-border-t);
	border-bottom-color: var(--btn-border-b);
	&:hover {
		background: var(--accent);
		box-shadow: inset 0 0 0 100vmax hsl(0 0% 0% / 0.1) !important;
		border-color: hsl(0 0% 0% / 0.1);
	}
	&:active {
		background: var(--accent);
		box-shadow: inset 0 0 0 100vmax hsl(0 0% 0% / 0.2) !important;
		border-color: hsl(0 0% 0% / 0.2);
	}
}

@mixin btnDanger {
	background: hsl(var(--discord-red));
	color: #fff;
	&:hover {
		background: hsl(var(--discord-red));
		box-shadow: inset 0 0 0 100vmax hsl(0 0% 0% / 0.1) !important;
		border-color: hsl(0 0% 0% / 0.1);
	}
	&:active {
		background: hsl(var(--discord-red));
		box-shadow: inset 0 0 0 100vmax hsl(0 0% 0% / 0.2) !important;
		border-color: hsl(0 0% 0% / 0.2);
	}
}
