button {
    --local-color-foreground: var(--color-brand-dark-blue);
    --local-color-background: var(--color-primary-white);
    --local-color-border: var(--color-brand-dark-blue);
    --local-color-hover-foreground: var(--color-brand-dark-blue);
    --local-color-hover-background: var(--color-brand-light-blue);
    --local-color-hover-border: var(--color-brand-dark-blue);
}

button {
    border: 1px solid var(--local-color-border);
    background-color: var(--local-color-background);
    color: var(--local-color-foreground);
    padding: 1rem 2rem;
    cursor: pointer;
    transition: all 0.25s ease-in;
    border-radius: 0.4rem;
    font-family: inherit;
    min-width: 10rem;
}

button:hover {
    background-color: var(--local-color-hover-background);
    border-color: var(--local-color-hover-border);
    color: var(--local-color-hover-foreground);
}

button.primary {
    --local-color-foreground: var(--color-primary-white);
    --local-color-background: var(--color-brand-dark-blue);
    --local-color-border: var(--color-brand-dark-blue);
    --local-color-hover-foreground: var(--color-brand-dark-blue);
    --local-color-hover-background: var(--color-primary-white);
    --local-color-hover-border: var(--color-brand-dark-blue);
}

button.aux {
    --local-color-foreground: var(--color-brand-navy);
    --local-color-background: var(--color-brand-orange);
    --local-color-border: var(--color-brand-orange);
    --local-color-hover-foreground: var(--color-brand-orange);
    --local-color-hover-background: var(--color-brand-navy);
    --local-color-hover-border: var(--color-brand-orange);
}

button.danger {
    --local-color-foreground: var(--color-button-danger);
    --local-color-background: var(--color-primary-white);
    --local-color-border: var(--color-button-danger);
    --local-color-hover-foreground: var(--color-primary-white);
    --local-color-hover-background: var(--color-button-danger);
    --local-color-hover-border: var(--color-button-danger);
    font-weight: 700;
}

button[disabled] {
    --local-color-foreground: var(--color-primary-black);
    --local-color-background: var(--color-grey-b);
    --local-color-border: var(--color-grey-b);
    --local-color-hover-foreground: var(--color-primary-black);
    --local-color-hover-background: var(--color-grey-b);
    --local-color-hover-border: var(--color-grey-b);
    cursor: not-allowed;
}

button.svg {
    padding: 0;
    width: unset;
    font-size: 0;
    border: none;
    --local-color-hover-background: transparent;
    min-width: unset;
    background-color: unset;
}