@charset "UTF-8";

.button,
.submit-button {
    /* display: flex; */
    /* flex-direction: row; */
    /* align-items: center; */
    gap: 0.3rem;
    border: none;
    border-radius: 0.3rem;
    padding: 0.3rem 0.8rem;
    text-decoration: none;

    font-size: 1rem;
    color: #fff;
    background-color: var(--color-primary, #884400);
    cursor: pointer;
    transition: all 0.2s ease;
}

.button:hover,
.submit-button:hover {
    background-color: var(--color-primary-dark, #662200);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.button:disabled,
.submit-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.button>.material-icons,
.submit-button>.material-icons {
    font-size: 1.5em;
}


.link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--color-link, #333);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
}

.link-button:hover {
    color: var(--color-link-hover, #884400);
    text-decoration: underline;
}

.link-button:disabled {
    color: var(--color-muted, gray);
    text-decoration: none;
    cursor: not-allowed;
}

.link-button.is-loading::after {
    content: '...';
    margin-left: 0.4em;
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}




/* --- MUTED --- */
.button.button-muted,
.submit-button.button-muted {
    background-color: var(--color-muted-bg, #777);
    color: #fff;
}

.button.button-muted:hover,
.submit-button.button-muted:hover {
    background-color: var(--color-muted-bg-dark, #555);
}


/* --- DANGER --- */
.button.button-danger,
.submit-button.button-danger {
    background-color: var(--color-danger, #c0392b);
    color: #fff;
}

.button.button-danger:hover,
.submit-button.button-danger:hover {
    background-color: var(--color-danger-dark, #962d22);
}