:root {
	--button-font-size: 16;
	--button-font-size-tablet: 16;
	--button-font-size-mobile: 16;

    --pk-button-font-family: var(--pk-text-font-family);
    --pk-button-font-weight: 500;

    --button-border-radius:var(--border-radius-small);

    --button-padding-block: 12;
    --button-padding-inline: 24;
    --button-padding-block-mobile: 10;
    --button-padding-inline-mobile: 20;

	
    /************/
    /* BUTTON 1 */
    /************/
    --button-bg-1:var(--dc-orange);
    --button-border-color-1: var(--primary-color, var(--dc-orange));
    --button-text-color-1: var(--pk-text-color);
    --button-icon-bg-1: var(--secondary-color);
    --button-icon-color-1: var(--primary-color, var(--dc-orange));
    /* HOVER */
    --button-bg-1-hover: var(--secondary-color, var(--dc-blue));
    --button-border-color-1-hover: var(--secondary-color, var(--dc-blue));
    --button-text-color-1-hover: var(--button-text-color-1);
    --button-icon-bg-1-hover: var(--secondary-color, var(--dc-blue));
    --button-icon-color-1-hover: var(--primary-color, var(--dc-orange));

    /************/
    /* BUTTON 2 */
    /************/
    --button-bg-2: transparent;
    --button-border-color-2: rgba(var(--dc-black-rgb), 0.4);
    --button-text-color-2: var(--primary-color, var(--dc-black));
    --button-icon-bg-2: var(--secondary-color, var(--dc-blue));
    --button-icon-color-2: var(--primary-color, var(--dc-orange));
    /* HOVER */
    --button-bg-2-hover: var(--secondary-color, var(--dc-blue));
    --button-border-color-2-hover: var(--secondary-color, var(--dc-blue));
    --button-text-color-2-hover: var(--pk-text-color);
    --button-icon-bg-2-hover: var(--secondary-color, var(--dc-blue));
    --button-icon-color-2-hover: var(--primary-color, var(--dc-orange));
}

:root {
    --pk-button-padding-block: var(--button-padding-block);
    --pk-button-padding-inline: var(--button-padding-inline);
    --pk-button-padding-block-mobile: var(--button-padding-block-mobile);
    --pk-button-padding-inline-mobile: var(--button-padding-inline-mobile);

    --pk-button-border-radius: var(--button-border-radius);
    --pk-button-font-size: var(--button-font-size);
}

body.relative-scaling {
    --pk-button-padding-block: max(
        var(--button-padding-block-mobile),
        calc((var(--button-padding-block) / 1) * var(--su))
    );
    --pk-button-padding-inline: max(
        var(--button-padding-inline-mobile),
        calc((var(--button-padding-inline) / 1) * var(--su))
    );
    --pk-button-padding-block-mobile: var(--pk-button-padding-block);
    --pk-button-padding-inline-mobile: var(--pk-button-padding-inline);

		--pk-button-font-size: max(1rem, calc(1 * var(--su)));
}

button {
    font-family: var(--pk-text-font-family);
}

.pk-button-group {
    margin-top: 2rem;
}

.pk-button,
.pk-button-group .pk-button {
    width: fit-content;
	display: flex;
    align-items: center;
    gap: 0.625rem;

    font-size: var(--pk-button-font-size);
	font-weight: 500;
	color: var(--button-text-color-1);
	text-decoration: none;
	line-height: normal!important;
	padding: max(.6rem, calc(.6 * var(--su))) max(1.25rem, calc(1.25 * var(--su)));
	border: 1px solid var(--button-border-color-1, var(--dc-orange));
    border-radius: var(--pk-button-border-radius);
	background-color: var(--button-bg-1);
    transition:
        opacity 0.3s ease-in-out,
        color 0.3s ease-in-out,
        border-color 0.3s ease-in-out,
        background-color 0.3s ease-in-out;
}

.pk-button .pk-button-text,
.pk-button-group .pk-button-text{
	padding-top: 0.125rem;
}

.pk-button::after,
.pk-button-group .pk-button::after {
    content: "\f1df";
    font-family: "Material Symbols Outlined";
    font-size: 1.1em;
    transition: transform 0.3s ease-in-out;
	margin-top: 0.125rem;
}

.pk-button:hover::after,
.pk-button-group .pk-button:hover::after {
    content: "\f1df";
    transform: translate(2px);
}

.pk-button-group .pk-button:nth-child(2),
.pk-button-outline {
    background-color: var(--button-bg-2, transparent);
    border-width: 1px;
    border-style: solid;
    border-color: var(--button-border-color-2, rgba(var(--dc-black-rgb), .4));
    color: var(--button-text-color-2, var(--dc-black));
}
.pk-button:hover,
.pk-button-group .pk-button:hover {
    opacity: 0.9;
}

.pk-button-group .pk-button:nth-child(2):hover,
.pk-button-outline:is(:hover, :focus-visible) {
    background-color: var(--button-bg-2-hover, var(--dc-blue));
    border-color: var(--button-border-color-2-hover, var(--dc-blue));
    color: var(--button-text-color-2-hover, var(--dc-black));
}

.pk-button-outline:focus-visible {
    outline: max(.125rem, calc(.125 * var(--su))) solid var(--dc-blue);
    outline-offset: max(.125rem, calc(.125 * var(--su)));
}

.pk-button-outline-white,
.pk-button-outlline-white,
.pk-button-group.pk-button-group--outline-white .pk-button {
    color: var(--dc-white);
    border: 1px solid #999;
    background: transparent;
}

.pk-button-outline-white .pk-button-text,
.pk-button-outlline-white .pk-button-text,
.pk-button-group.pk-button-group--outline-white .pk-button .pk-button-text {
    color: var(--dc-white);
}

.pk-button-outline-white:hover .pk-button-text,
.pk-button-outlline-white:hover .pk-button-text,
.pk-button-group.pk-button-group--outline-white .pk-button:hover .pk-button-text {
    color: var(--dc-black);
}

.pk-button-outlline-white:not(:hover)::after{
  content: "\f1df";
  color: var(--dc-white);
}


.pk-button-outline-white:is(:hover, :focus-visible),
.pk-button-outlline-white:is(:hover, :focus-visible),
.pk-button-group.pk-button-group--outline-white .pk-button:is(:hover, :focus-visible) {
    border-color: var(--dc-white);
    background: var(--dc-white);
    color: var(--dc-black) !important;
    opacity: 1;
}

.pk-button-outline-white:focus-visible,
.pk-button-outlline-white:focus-visible,
.pk-button-group.pk-button-group--outline-white .pk-button:focus-visible {
    outline: max(.125rem, calc(.125 * var(--su))) solid var(--dc-blue);
    outline-offset: max(.125rem, calc(.125 * var(--su)));
}

.pk-button-outline-black {
    color: var(--dc-black);
    border: 1px solid #333333;
    background: transparent;
}

.pk-button-outline-black .pk-button-text {
    color: var(--dc-black);
}

.pk-button-outline-black:hover .pk-button-text {
    color: var(--dc-white);
}

.pk-button-outline-black:not(:hover)::after {
  content: "\f1df";
  color: var(--dc-black);
}

.pk-button-outline-black:is(:hover, :focus-visible) {
    border-color: var(--dc-black);
    background: var(--dc-black);
    color: var(--dc-white) !important;
    opacity: 1;
}

.pk-button-outline-black:focus-visible {
    outline: max(.125rem, calc(.125 * var(--su))) solid var(--dc-blue);
    outline-offset: max(.125rem, calc(.125 * var(--su)));
}

@media screen and (max-width: 992px) {
    :root {
        --pk-button-font-size: var(--button-font-size-tablet);
    }
}

@media screen and (max-width: 767px) {
    :root {
        --pk-button-padding-block: var(--pk-button-padding-block-mobile);
        --pk-button-padding-inline: var(--pk-button-padding-inline-mobile);

        --pk-button-font-size: var(--button-font-size-mobile);
    }
}