button {
    cursor: pointer;
}

.button {
    display: inline-block;
    border: solid 1px;
    text-decoration: none;
    margin-top: var(--space-xs);
    border-radius: 2rem;
    width: fit-content;
}

.button,
.button button {
    -webkit-transition: var(--transition);
    -o-transition: var(--transition);
    transition: var(--transition);
}

.button--xs {
    padding: calc(var(--space-3xs)/4) calc(var(--space-s)/4);
}

.button--s {
    padding: var(--space-3xs) var(--space-s);
}

.button--m {
    padding: var(--space-2xs) var(--space-m);
}

.button--l {
    padding: var(--space-xs) var(--space-l);
}

.button--l button {
    font-size: 125%;
}

.button--primary,
.button--primary button,
.button--primary input {
    color: var(--color-text--inv);
}

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

.button--primary:hover {
    background: transparent;
    color: var(--color-primary) !important;
}

.button--primary:hover button,
.button--primary:hover input {
    color: var(--color-primary);
}

.button--secondary,
.button--secondary button,
.button--secondary input {
    color: var(--color-primary);
}

.button--secondary {
    border-color: var(--color-primary);
    background: transparent;
}

.button--secondary:hover,
.button--secondary:hover input {
    background: var(--color-primary);
    color: var(--color-text--inv) !important;
}

.button--secondary:hover,
.button--secondary:hover button {
    color: var(--color-text--inv);
}

input[type="submit"] {
    cursor: pointer;
}

button[aria-disabled="true"] {
    background: var(--color-disabled);
    border-color: var(--color-disabled);
}

button[aria-disabled="true"]:hover {
    background: var(--color-disabled);
    color: var(--color-text--inv) !important;
    cursor: not-allowed;
}