.nnds-button {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.nnds-button p {
    display: inline;
    line-height: var(--lineHeight-normal);
}

.nnds-button img {
    margin-top: -2px;
}

.nnds-button-primary {
    background: var(--color-text-default);
    color: var(--color-brand-white);
    border: none;
    border-radius: 4px;
}

.nnds-button-primary:not([href]) {
    /* suppress inherited css */
    color: var(--color-brand-white) !important;
}

.nnds-button-primary:focus,
.nnds-button-primary:hover,
.nnds-button-primary:link,
.nnds-button-primary:visited {
    text-decoration: none;
    color: var(--color-brand-white);
}

.nnds-button-primary-disabled {
    /* color not designed */
    cursor: default !important;
    pointer-events: none;
}

.nnds-button-secondary {
    background: var(--color-brand-white);
    color: var(--color-text-default);
    border: 1px solid var(--color-text-default);
    border-radius: 4px;
}

.nnds-button-secondary:not([href]) {
    /* suppress inherited css */
    color: var(--color-text-default) !important;
}

.nnds-button-secondary:focus,
.nnds-button-secondary:hover,
.nnds-button-secondary:link,
.nnds-button-secondary:visited {
    text-decoration: none;
    color: var(--color-text-default);
}

.nnds-button-secondary-disabled {
    color: var(--color-grey-400);
    border-color: var(--color-grey-400);
    cursor: default !important;
    pointer-events: none;
}

.nnds-button-large {
    padding: 8px 16px 10px 16px;
    font-size: var(--fontSize-l);
}

.nnds-button-medium {
    padding: 12px 16px;
    font-size: var(--fontSize-m);
}

.nnds-button-small {
    padding: 4px 8px;
    font-size: var(--fontSize-m);
}