:root {
	--btn-p-block-lg: calc(1em - 2px);
	--btn-p-inline-lg: calc(1.5em - 2px);

	--btn-p-block-md: calc(0.75em - 2px);
	--btn-p-inline-md: calc(1.25em - 2px);

	--btn-p-block-sm: calc(0.625em - 2px);
	--btn-p-inline-sm: calc(1em - 2px);
}

.pk-button-group.size-md .pk-button {
	padding: var(--btn-p-block-md) var(--btn-p-inline-md);
}
.pk-button-group.size-sm .pk-button {
	padding: var(--btn-p-block-sm) var(--btn-p-inline-sm);
}
.pk-button-group .pk-button svg path {
	transition: fill 0.3s ease;
}

/* PRIMARY BUTTON */
.pk-button-group .pk-button {
	display: flex; align-items: center; gap: 0.5em;
	padding: var(--btn-p-block-lg) var(--btn-p-inline-lg);
	border-radius: 100px; text-decoration: none;
	background-color: var(--brand-secondary-orange); color: #ffffff;
	font-weight: 700; font-size: var(--heading-xs); line-height: 1.5;
	border: 2px solid var(--brand-secondary-orange);
	transition: all 0.3s ease;
}
.pk-button-group .pk-button:hover {
	background-color: var(--brand-orange-2); border-color: var(--brand-orange-2);
	color: var(--brand-primary-purple);
}
.pk-button-group .pk-button:hover svg path {
	fill: var(--brand-primary-purple);
}
.pk-button-group .pk-button:focus-visible {
	transition: none;
	border-color: #ffffff;
	outline: 3px solid var(--brand-primary-purple);
}
.pk-button-group .pk-button:active {
	border-color: var(--brand-orange-7); background-color: var(--brand-orange-7);
	color: #ffffff;
}
.pk-button-group .pk-button:active svg path {
	fill: #ffffff;
}

/* SECONDARY BUTTON */
.pk-button-group .pk-button:nth-child(2),
.pk-button-group .pk-button.secondary {
	background: transparent; border-color: var(--brand-primary-purple);
	color: var(--brand-primary-purple);
	outline: 2px solid transparent;
}
.pk-button-group .pk-button:nth-child(2):hover,
.pk-button-group .pk-button.secondary:hover {
	border-color: var(--brand-secondary-orange); 
	outline: 2px solid var(--brand-secondary-orange);
}
.pk-button-group .pk-button:nth-child(2) svg path,
.pk-button-group .pk-button.secondary svg path {
	fill: var(--brand-primary-purple);	
}
.pk-button-group .pk-button:nth-child(2):focus-visible,
.pk-button-group .pk-button.secondary:focus-visible {
	outline: 3px solid var(--brand-secondary-orange);
}
.pk-button-group .pk-button:nth-child(2):active,
.pk-button-group .pk-button.secondary:active {
	border-color: var(--brand-orange-7); outline: none;
}

/* DARK */
.pk-button-group.dark .pk-button.pk-button.secondary,
.pk-button-group.dark .pk-button:nth-child(2) {
	background: transparent; border-color: #ffffff; color: #ffffff;
}
.pk-button-group.dark .pk-button.secondary svg path,
.pk-button-group.dark .pk-button:nth-child(2) svg path {
	fill: #ffffff;
}
.pk-button-group.dark .pk-button.secondary:hover,
.pk-button-group.dark .pk-button:nth-child(2):hover {
	border-color: var(--brand-secondary-orange);
	color: #ffffff;
}
.pk-button-group.dark .pk-button.secondary:hover svg path,
.pk-button-group.dark .pk-button:nth-child(2):hover svg path {
	fill: #ffffff;
}
.pk-button-group.dark .pk-button.secondary:focus-visible,
.pk-button-group.dark .pk-button:nth-child(2):focus-visible {
	outline: 3px solid var(--brand-secondary-orange);
}
.pk-button-group.dark .pk-button.secondary:active,
.pk-button-group.dark .pk-button:nth-child(2):active {
	border-color: var(--brand-orange-7);
}


/* LINK */
.pk-button-group .pk-button.link {
	background: transparent; border: none; padding: 0;
	color: var(--brand-primary-purple); font-weight: 700;
	border-bottom: 2px solid var(--brand-purple-5);
	outline: none; border-radius: 0; gap: 0.5rem;
	font-size: var(--heading-xs);
}
.pk-button-group .pk-button.link:hover {
	border-color: var(--brand-orange-2); border-width: 4px;
}
.pk-button-group .pk-button.link:focus-visible {
	border-width: 4px;
}
.pk-button-group .pk-button.link:active {
	border-color: var(--brand-orange-7); border-width: 2px;
}


.pk-button-group .pk-button.link.size-md svg {
	width: 1rem; height: auto;
}
.pk-button-group .pk-button.link.size-sm {
	font-size: var(--body-sm);
}
.pk-button-group .pk-button.link.size-sm svg {
	width: 0.875rem; height: auto;
}
/* DARK */
.pk-button-group.dark .pk-button.link {
	color: #ffffff; border-color: #ffffff;
}
.pk-button-group.dark .pk-button.link:hover {
	border-color: var(--brand-secondary-orange);
}
.pk-button-group.dark .pk-button.link:focus-visible {
	border-color: var(--brand-secondary-orange);
}
.pk-button-group.dark .pk-button.link:active {
	border-color: var(--brand-orange-7); color: var(--brand-orange-7);
}

@media screen and (max-width: 767px) {
	body .pk-page .pk-button-group .pk-button:not(.link) {
		padding: var(--btn-p-block-sm) var(--btn-p-inline-sm);
	}
}