/* BUTTONS */
.pk-button {
    font-size: var(--body-base);
    text-decoration: none;
    padding: 10px 16px;
    color: unset;
    transition: opacity 0.5s ease-in-out;
}

/* .pk-button:hover{
  background-color: #333;
}

.pk-button:active{
  background-color: #222222;
}

.pk-button span{
  color: white;
} */

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

.pk-button-blue {
    background: var(--pk-primary-blue);
}

/* Button Arrows */
.pk-button-arrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pk-button-arrow::after {
    content: "\f8ce";
    font-family: "Material Symbols outlined";
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    transition: transform 0.3s ease-in-out;
}

.pk-button-arrow:is(.pk-button-blue)::after {
    border: 1.5px solid var(--pk-white);
}

/* Button text colors */
.pk-button-blue * {
    color: var(--pk-white);
}

.pk-button-arrow:is(.pk-button-blue) {
    color: var(--pk-white);
}

/*Hover State  */
.pk-button-arrow:hover::after {
    transform: rotate(45deg);
}
/* .pk-button:hover{
	opacity: 0.9;
} */