.btn {
    --a-text-decoration: none;
    align-items: center;
    border-radius: var(--btn-border-radius, 9999px);
    display: flex;
    justify-content: center;
    padding: var(--btn-padding, 0.5rem 1rem);
    text-align: center;

    > svg {
        fill: var(--btn-fill-color, none);
        stroke: var(--btn-stroke-color, none);
    }

    &.btn--primary {
        --btn-bg-color: var(--color-primary);
        --btn-color: var(--color-secondary);
        --btn-fill-color: var(--color-secondary);
    }

    &.btn--secondary {
        --btn-bg-color: var(--color-secondary);
        --btn-border: 1px solid var(--color-primary);
        --btn-color: var(--color-primary);
        --btn-fill-color: var(--color-primary);
        --btn-hover-filter: brightness(97%);
    }

    &.btn--tertiary {
        --btn-bg-color: var(--color-white);
        --btn-border: 1px solid var(--color-gray);
        --btn-border-radius: 0.75rem;
        --btn-padding: 1rem;
        --btn-hover-filter: brightness(97%);
    }

    &.btn--disabled {
        --btn-bg-color: var(--color-gray);
        --btn-color: var(--color-white);
        pointer-events: none;
    }
}