/* css/components/_buttons.css (Updated with Variables) */

.button-wrapper {
    display: inline-block;
    width: fit-content;
    padding: var(--padding-xxxs);
    border-radius: var(--border-radius-xxxxxl);
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
    line-height: 0;
	cursor: pointer;
}

/* Move wrapper on hover along with the button */
.button-wrapper:has(.cta-button:hover) {
    transform: translateY(-0.125rem);
}

.button-wrapper:has(.button-primary:hover),
.button-wrapper:has(.button-secondary:hover),
.button-wrapper:has(.button-tertiary:hover) {
    transform: translateY(-0.1875rem);
}

.button-wrapper:has(.button-primary-outline:hover),
.button-wrapper:has(.button-secondary-outline:hover),
.button-wrapper:has(.button-tertiary-outline:hover) {
    transform: translateY(-0.1875rem);
}

/* Focus states for each button type using :has() */
.button-wrapper:has(.cta-button:focus),
.button-wrapper:has(.button-primary:focus) {
    border-color: var(--orange-dark);
}

.button-wrapper:has(.button-secondary:focus) {
    border-color: var(--green-dark);
}

.button-wrapper:has(.button-tertiary:focus) {
    border-color: var(--blue-dark);
}

.button-wrapper:has(.button-primary-outline:focus) {
    border-color: var(--orange-dark);
}

.button-wrapper:has(.button-secondary-outline:focus) {
    border-color: var(--green-dark);
}

.button-wrapper:has(.button-tertiary-outline:focus) {
    border-color: var(--blue-dark);
}

.cta-button,
.button-primary,
.button-secondary,
.button-tertiary {
    background: var(--button-primary-background);
    color: var(--button-primary-text);
    text-shadow: var(--button-primary-text-shadow);
    border: none;
    outline: none;
}

.cta-button,
.button-primary,
.button-secondary,
.button-tertiary,
.button-primary-outline,
.button-secondary-outline,
.button-tertiary-outline {
    display: inline-block;
    padding: var(--padding-xl) var(--padding-xxxxxl);
    border-radius: 1.875rem; /* 30px */
    box-shadow: var(--neutral-dark-shadow);
    text-decoration: none;
    font-family: 'Varela Round', sans-serif;
	font-size: var(--font-size-button);
	line-height: normal;
	text-wrap: nowrap;
	cursor: pointer;
    transition: all 0.3s ease;    
}

.cta-button {
    padding: var(--padding-lg) var(--padding-xxxl);
}

.button-secondary {
    background: var(--button-secondary-background);
    color: var(--button-secondary-text);
    text-shadow: var(--button-secondary-text-shadow);
}

.button-tertiary {
    background: var(--button-tertiary-background);
    color: var(--button-tertiary-text);
    text-shadow: var(--button-tertiary-text-shadow);
}

.cta-button:hover {
    background: var(--button-primary-background-hover);
}

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

/* Remove box-shadow from focus states since wrapper handles it */
.cta-button:focus,
.button-primary:focus,
.button-secondary:focus,
.button-tertiary:focus,
.button-primary-outline:focus,
.button-secondary-outline:focus,
.button-tertiary-outline:focus {
    outline: none;
    box-shadow: none;
}

.button-secondary:hover {
    background: var(--button-secondary-background-hover);
}

.button-tertiary:hover {
    background: var(--button-tertiary-background-hover);
}

.button-primary-outline {
    background: var(--button-primary-outline-background);
    color: var(--button-primary-outline-text);
    border: 2px solid var(--button-primary-outline-border);
}

.button-secondary-outline {
    background: var(--button-secondary-outline-background);
    color: var(--button-secondary-outline-text);
    border: 2px solid var(--button-secondary-outline-border);
}

.button-tertiary-outline {
    background: var(--button-tertiary-outline-background);
    color: var(--button-tertiary-outline-text);
    border: 2px solid var(--button-tertiary-outline-border);
}

.button-primary-outline:hover {
    background: var(--button-primary-outline-background-hover);
    color: var(--button-primary-outline-text-hover);
    border: 2px solid var(--button-primary-outline-border-hover);
    box-shadow: var(--button-primary-outline-shadow);
}

.button-secondary-outline:hover {
    background: var(--button-secondary-outline-background-hover);
    color: var(--button-secondary-outline-text-hover);
    border: 2px solid var(--button-secondary-outline-border-hover);
    box-shadow: var(--button-secondary-outline-shadow);
}

.button-tertiary-outline:hover {
    background: var(--button-tertiary-outline-background-hover);
    color: var(--button-tertiary-outline-text-hover);
    border: 2px solid var(--button-tertiary-outline-border-hover);
    box-shadow: var(--button-tertiary-outline-shadow);
}