.button {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: .25rem;
    row-gap: .25rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border: none;
    border-radius: var(--button-border-radius);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    text-align: center;
    text-decoration: none;
    appearance: none;
    cursor: pointer;
}

.button svg {
    fill: currentColor;
}

/* Color variants */
.button--primary {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
}

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


/* Modifiers */
.button--outline {
    border-width: 1px;
    border-style: solid;
    border-color: currentColor;
    color: inherit;
    background-color: transparent !important;
}

.button--ghost {
    border: none;
    box-shadow: none;
    color: inherit;
    background-color: transparent !important;
}

.button--label {
    cursor: default;
    pointer-events: none;
}


/* States */
.button:hover:not(:disabled),
.button:focus:not(:disabled) {
    opacity: 90%;
}

.button:active:not(:disabled) {
    transform: scale(0.98);
}

.button:disabled {
    opacity: 50%;
    cursor: not-allowed;
}