button,
.btn,
.pn-btn {
	cursor: pointer;
	padding: var(--padding-md) var(--padding-lg);
	border-radius: var(--border-radius-sm);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap-md);
	font-size: var(--body-4-font-size);
	font-weight: 550;
	line-height: var(--body-4-line-height);
	letter-spacing: var(--body-4-letter-spacing);
}

button:disabled,
button[disabled],
.btn.disabled,
.btn[disabled],
.pn-btn.disabled,
.pn-btn[disabled],
fieldset[disabled] .btn,
fieldset[disabled] .pn-btn {
	opacity: .45;
	cursor: not-allowed;
	box-shadow: none;
}

.pn-btn--sm {
	padding: var(--padding-sm) var(--padding-md);
	border-radius: var(--border-radius-sm);
}

.pn-btn--md {
	padding: var(--padding-md) var(--padding-lg);
	border-radius: var(--border-radius-sm);
}

.pn-btn--lg {
	padding: var(--padding-lg) var(--padding-xxl);
	border-radius: var(--border-radius-md);
	font-size: var(--body-3-font-size);
}

.pn-btn svg {
	width: 16px;
	height: 16px;
}

.pn-btn i {
	font-size: 16px;
}

.pn-btn--full {
	width: 100%;
}

.pn-btn-group {display: flex;}

.pn-btn-group .pn-btn:first-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.pn-btn-group .pn-btn:last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.pn-btn--primary,
.btn-primary {
	border: 1px solid var(--border-blue-default);
	background: var(--surface-action-blue-default);
	color: var(--text-action-light-fixed);
}

.pn-btn--primary:hover,
.btn-primary:hover,
.pn-btn--primary:hover,
.btn-primary:active,
.pn-btn--primary:hover,
.btn-primary:focus {
	border: 1px solid var(--border-blue-hover);
	background: var(--surface-action-blue-hover);
	outline: none;
}

.pn-btn--primary__ghost {
	color: var(--text-blue-default);
}

.pn-btn--primary__ghost:hover {
	color: var(--text-blue-hover);
}

.pn-btn--primary__outline {
	border: 1px solid var(--surface-action-blue-default);
	background: transparent;
	color: var(--text-blue-default);
}

.pn-btn--primary__outline:hover {
	background: var(--surface-action-blue-default);
	color: var(--text-action-light-fixed);
}

/* Mesma família do --primary, um tom abaixo: fundo azul claro com texto azul.
   Para o segundo botão de uma dupla, quando os dois são azuis e só precisam ser
   distinguíveis entre si. */
.pn-btn--primary__soft {
	border: 1px solid var(--surface-action-blue-soft-hover);
	background: var(--surface-action-blue-soft-default);
	color: var(--text-action-blue-soft);
}

.pn-btn--primary__soft:hover,
.pn-btn--primary__soft:active,
.pn-btn--primary__soft:focus {
	background: var(--surface-action-blue-soft-hover);
	color: var(--text-action-blue-soft);
	outline: none;
}

.pn-btn--secondary,
.btn-secondary {
	border: 1px solid var(--border-dark-primary);
	background: var(--surface-action-neutral-dark);
	color: var(--text-action-light);
}

.pn-btn--secondary:hover,
.btn-secondary:hover,
.pn-btn--secondary:active,
.btn-secondary:active,
.pn-btn--secondary:focus,
.btn-secondary:focus {
	background: var(--surface-action-neutral-dark-hover);
}

.pn-btn--secondary__ghost {
	color: var(--text-action-dark);
}

.pn-btn--secondary__ghost:hover {
	color: var(--text-action-dark);
}

.pn-btn--secondary__outline {
	border: 1px solid var(--surface-action-neutral-dark);
	background: transparent;
	color: var(--text-action-dark);
}

.pn-btn--secondary__outline:hover {
	background: var(--surface-action-neutral-dark);
	color: var(--text-action-light);
}

.pn-btn--gray,
.btn-gray {
	background: var(--surface-light-quinteary);
	color: var(--text-action-dark);
	border: 1px solid var(--surface-light-terceary);
}

.pn-btn--gray:hover,
.btn-gray:hover,
.pn-btn--gray:active,
.btn-gray:active,
.pn-btn--gray:focus,
.btn-gray:focus {
	background: var(--surface-light-terceary);
}

.pn-btn--gray__outline {
	border: 1px solid var(--border-light-secundary);
	background: transparent;
	color: var(--text-action-dark);
}

.pn-btn--gray__outline:hover {
	background: var(--surface-light-terceary);
	color: var(--text-action-dark);
}

.btn-default {
	background: var(--surface-light-quinteary);
}