.np-button,
.wp-element-button,
.wp-block-button__link,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    display: inline-flex;
    gap: var(--np-spacing-xs);
    align-items: center;
    justify-content: center;
    min-height: var(--np-button-height-md);
    padding-block: 0;
    padding-inline: var(--np-button-padding-x-md);
    color: var(--np-color-surface);
    background: var(--np-color-primary-teal);
    border: var(--np-border-width) var(--np-border-style) var(--np-color-primary-teal);
    border-radius: var(--np-radius-pill);
    font-family: var(--np-font-primary);
    font-size: var(--np-font-size-sm);
    font-weight: var(--np-font-weight-bold);
    line-height: var(--np-line-height-sm);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    box-shadow: none;
    transition:
        color var(--np-transition-fast),
        background-color var(--np-transition-fast),
        border-color var(--np-transition-fast),
        box-shadow var(--np-transition-fast),
        transform var(--np-transition-fast);
}

.np-button:hover,
.np-button:focus,
.wp-element-button:hover,
.wp-element-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
    color: var(--np-color-surface);
    background: var(--np-color-primary-dark);
    border-color: var(--np-color-primary-dark);
    text-decoration: none;
    box-shadow: var(--np-shadow-sm);
    transform: translateY(-2px);
}

.np-button:active,
.wp-element-button:active,
.wp-block-button__link:active,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: none;
}

.np-button:disabled,
.np-button[disabled],
.wp-element-button:disabled,
.wp-element-button[disabled],
.wp-block-button__link:disabled,
.wp-block-button__link[disabled],
button:disabled,
button[disabled],
input[type="button"]:disabled,
input[type="button"][disabled],
input[type="reset"]:disabled,
input[type="reset"][disabled],
input[type="submit"]:disabled,
input[type="submit"][disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

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

.np-button-primary:hover,
.np-button-primary:focus {
    color: var(--np-color-surface);
    background: var(--np-color-primary-dark);
    border-color: var(--np-color-primary-dark);
}

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

.np-button-dark:hover,
.np-button-dark:focus {
    color: var(--np-color-primary-dark);
    background: var(--np-color-accent-mint);
    border-color: var(--np-color-accent-mint);
}

.np-button-light {
    color: var(--np-color-primary-dark);
    background: var(--np-color-surface);
    border-color: var(--np-color-surface);
}

.np-button-light:hover,
.np-button-light:focus {
    color: var(--np-color-surface);
    background: var(--np-color-primary-teal);
    border-color: var(--np-color-primary-teal);
}

.np-button-accent {
    color: var(--np-color-primary-dark);
    background: var(--np-color-accent-mint);
    border-color: var(--np-color-accent-mint);
}

.np-button-accent:hover,
.np-button-accent:focus {
    color: var(--np-color-surface);
    background: var(--np-color-primary-dark);
    border-color: var(--np-color-primary-dark);
}

.np-button-gold {
    color: var(--np-color-primary-dark);
    background: var(--np-color-accent-gold);
    border-color: var(--np-color-accent-gold);
}

.np-button-gold:hover,
.np-button-gold:focus {
    color: var(--np-color-surface);
    background: var(--np-color-primary-dark);
    border-color: var(--np-color-primary-dark);
}

.np-button-outline {
    color: var(--np-color-primary-teal);
    background: transparent;
    border-color: var(--np-color-primary-teal);
}

.np-button-outline:hover,
.np-button-outline:focus {
    color: var(--np-color-surface);
    background: var(--np-color-primary-teal);
    border-color: var(--np-color-primary-teal);
}

.np-button-outline-dark {
    color: var(--np-color-primary-dark);
    background: transparent;
    border-color: var(--np-color-primary-dark);
}

.np-button-outline-dark:hover,
.np-button-outline-dark:focus {
    color: var(--np-color-surface);
    background: var(--np-color-primary-dark);
    border-color: var(--np-color-primary-dark);
}

.np-button-ghost {
    color: var(--np-color-primary-teal);
    background: color-mix(in srgb, var(--np-color-primary-teal) 9%, transparent);
    border-color: transparent;
}

.np-button-ghost:hover,
.np-button-ghost:focus {
    color: var(--np-color-primary-dark);
    background: color-mix(in srgb, var(--np-color-accent-mint) 28%, transparent);
    border-color: transparent;
    box-shadow: none;
}

.np-button-link,
.np-entry-read-more,
.np-card-link,
.np-post-card-read-more,
.np-archive-read-more,
.np-search-read-more {
    min-height: auto;
    padding: 0;
    color: var(--np-color-primary-teal);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.np-button-link:hover,
.np-button-link:focus,
.np-entry-read-more:hover,
.np-entry-read-more:focus,
.np-card-link:hover,
.np-card-link:focus,
.np-post-card-read-more:hover,
.np-post-card-read-more:focus,
.np-archive-read-more:hover,
.np-archive-read-more:focus,
.np-search-read-more:hover,
.np-search-read-more:focus {
    color: var(--np-color-primary-dark);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
}

.np-button-link::after,
.np-entry-read-more::after,
.np-card-link::after,
.np-post-card-read-more::after,
.np-archive-read-more::after,
.np-search-read-more::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--np-transition-fast);
}

html[dir="rtl"] .np-button-link::after,
html[dir="rtl"] .np-entry-read-more::after,
html[dir="rtl"] .np-card-link::after,
html[dir="rtl"] .np-post-card-read-more::after,
html[dir="rtl"] .np-archive-read-more::after,
html[dir="rtl"] .np-search-read-more::after {
    transform: rotate(225deg);
}

.np-button-link:hover::after,
.np-button-link:focus::after,
.np-entry-read-more:hover::after,
.np-entry-read-more:focus::after,
.np-card-link:hover::after,
.np-card-link:focus::after,
.np-post-card-read-more:hover::after,
.np-post-card-read-more:focus::after,
.np-archive-read-more:hover::after,
.np-archive-read-more:focus::after,
.np-search-read-more:hover::after,
.np-search-read-more:focus::after {
    transform: translateX(3px) rotate(45deg);
}

html[dir="rtl"] .np-button-link:hover::after,
html[dir="rtl"] .np-button-link:focus::after,
html[dir="rtl"] .np-entry-read-more:hover::after,
html[dir="rtl"] .np-entry-read-more:focus::after,
html[dir="rtl"] .np-card-link:hover::after,
html[dir="rtl"] .np-card-link:focus::after,
html[dir="rtl"] .np-post-card-read-more:hover::after,
html[dir="rtl"] .np-post-card-read-more:focus::after,
html[dir="rtl"] .np-archive-read-more:hover::after,
html[dir="rtl"] .np-archive-read-more:focus::after,
html[dir="rtl"] .np-search-read-more:hover::after,
html[dir="rtl"] .np-search-read-more:focus::after {
    transform: translateX(-3px) rotate(225deg);
}

.np-button-sm {
    min-height: var(--np-button-height-sm);
    padding-inline: var(--np-button-padding-x-sm);
    font-size: var(--np-font-size-xs);
}

.np-button-md {
    min-height: var(--np-button-height-md);
    padding-inline: var(--np-button-padding-x-md);
    font-size: var(--np-font-size-sm);
}

.np-button-lg {
    min-height: var(--np-button-height-lg);
    padding-inline: var(--np-button-padding-x-lg);
    font-size: var(--np-font-size-md);
}

.np-button-block {
    width: 100%;
}

.np-button-rounded {
    border-radius: var(--np-radius-md);
}

.np-button-square {
    width: var(--np-button-height-md);
    min-width: var(--np-button-height-md);
    padding-inline: 0;
    border-radius: var(--np-radius-md);
}

.np-button-circle {
    width: var(--np-button-height-md);
    min-width: var(--np-button-height-md);
    padding-inline: 0;
    border-radius: var(--np-radius-circle);
}

.np-button-sm.np-button-square,
.np-button-sm.np-button-circle {
    width: var(--np-button-height-sm);
    min-width: var(--np-button-height-sm);
}

.np-button-lg.np-button-square,
.np-button-lg.np-button-circle {
    width: var(--np-button-height-lg);
    min-width: var(--np-button-height-lg);
}

.np-button-has-icon {
    gap: var(--np-spacing-xs);
}

.np-button-icon {
    display: inline-flex;
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.np-button-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.np-button-text {
    display: inline-flex;
    align-items: center;
    line-height: var(--np-line-height-sm);
}

.np-button-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.np-button-loading::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 1.1rem;
    height: 1.1rem;
    margin-block-start: -0.55rem;
    margin-inline-start: -0.55rem;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--np-radius-circle);
    animation: np-button-spin 700ms linear infinite;
}

.np-button-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--np-spacing-sm);
    align-items: center;
}

.np-button-group-center {
    justify-content: center;
}

.np-button-group-end {
    justify-content: flex-end;
}

.np-button-group-stretch {
    display: flex;
}

.np-button-group-stretch .np-button {
    flex: 1 1 auto;
}

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--np-spacing-sm);
}

.wp-block-buttons.is-content-justification-center {
    justify-content: center;
}

.wp-block-buttons.is-content-justification-right {
    justify-content: flex-end;
}

.wp-block-buttons.is-content-justification-left {
    justify-content: flex-start;
}

.wp-block-button {
    margin: 0;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--np-color-primary-teal);
    background: transparent;
    border-color: var(--np-color-primary-teal);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
    color: var(--np-color-surface);
    background: var(--np-color-primary-teal);
}

.wp-block-button.is-style-fill .wp-block-button__link {
    color: var(--np-color-surface);
    background: var(--np-color-primary-teal);
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus {
    background: var(--np-color-primary-dark);
}

.search-submit,
.wp-block-search__button,
.comment-form .submit,
.form-submit .submit,
.post-password-form input[type="submit"] {
    min-height: var(--np-button-height-md);
}

.np-content-404-home-link {
    min-width: 10rem;
}

.np-menu-toggle {
    color: var(--np-color-primary-dark);
    background: var(--np-color-surface-soft);
    border-color: var(--np-color-border);
}

.np-menu-toggle:hover,
.np-menu-toggle:focus {
    color: var(--np-color-surface);
    background: var(--np-color-primary-teal);
    border-color: var(--np-color-primary-teal);
}

.np-back-to-top {
    font-weight: var(--np-font-weight-bold);
}

@keyframes np-button-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 782px) {
    .np-button,
    .wp-element-button,
    .wp-block-button__link,
    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        white-space: normal;
    }

    .np-button-group,
    .wp-block-buttons {
        width: 100%;
    }

    .np-button-group .np-button,
    .wp-block-buttons .wp-block-button,
    .wp-block-buttons .wp-block-button__link {
        width: 100%;
    }
}