a.mds-button,
button.mds-button {
    display: inline-flex;
    width: fit-content;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;

}

.mds-button {
    grid-column: 1;
    padding: var(--spacing-8) var(--spacing-14);
    gap: var(--spacing-8);
    text-decoration: none;
    cursor: pointer;
}

.mds-button.primary {
    background-color: #171717;
    color: #fff;
    border-radius: var(--radius-4);
    border: none;
}

.mds-button span {
    font-size: var(--text-16);
    letter-spacing: var(--letter-spacing-1);
    text-wrap: nowrap;
}

.mds-button.primary:hover:not(.inactive) {
    background-color: #4F4F4F;
}

.mds-button.primary:active:not(.inactive) {
    background-color: #777;
}

.mds-button.primary:focus:not(.inactive) {
    background-color: #171717;
    outline: none;
}

.mds-button.primary.inactive {
    background-color: #E2E2E2;
    color: #9E9E9E;
    cursor:not-allowed;
    pointer-events: none;
}