@charset "UTF-8";

:root {
    --np-btn-radius: 12px;
    --np-btn-shadow: 0 1px 0 rgba(var(--np-black), 0.06),
    0 10px 22px rgba(var(--np-black), 0.14);
    --np-btn-shadow-hover: 0 1px 0 rgba(var(--np-black), 0.06),
    0 14px 28px rgba(var(--np-black), 0.18);

    --np-btn-ring: 0 0 0 4px var(--np-ring);

    /* primary */
    --np-btn-primary-bg: rgba(var(--np-brand-dark), 0.98);
    --np-btn-primary-bg-hover: rgba(var(--np-brand-hover), 1);
    --np-btn-primary-text: rgba(var(--np-white), 0.98);
    --np-btn-border: rgba(var(--np-black), 0.08);

    /* outline primary */
    --np-btn-op-border: rgba(var(--np-brand-hover), 0.45);
    --np-btn-op-border-hover: rgba(var(--np-brand-hover), 0.65);

    --np-btn-op-text: rgba(var(--np-brand-dark), 0.98);
    --np-btn-op-bg: rgba(var(--np-white), 0.55);
    --np-btn-op-bg-hover: rgba(var(--np-brand), 0.12);

    --np-btn-op-shadow: 0 1px 0 rgba(var(--np-black), 0.03),
    0 10px 22px rgba(var(--np-black), 0.08);
    --np-btn-op-shadow-hover: 0 1px 0 rgba(var(--np-black), 0.03),
    0 14px 28px rgba(var(--np-black), 0.12);

    /* danger */
    --np-btn-danger-bg: rgba(var(--np-danger-strong), 0.98);
    --np-btn-danger-bg-hover: rgba(var(--np-danger), 0.98);
    --np-btn-danger-text: rgba(var(--np-white), 0.98);

    --np-btn-danger-ring: 0 0 0 4px rgba(var(--np-danger), 0.22);

    /* outline danger */
    --np-btn-od-border: rgba(var(--np-danger-strong), 0.45);
    --np-btn-od-border-hover: rgba(var(--np-danger-strong), 0.65);

    --np-btn-od-text: rgba(var(--np-danger-strong), 0.95);
    --np-btn-od-bg: rgba(var(--np-white), 0.55);
    --np-btn-od-bg-hover: rgba(var(--np-danger), 0.10);

    --np-btn-od-shadow: 0 1px 0 rgba(var(--np-black), 0.03),
    0 10px 22px rgba(var(--np-black), 0.08);
    --np-btn-od-shadow-hover: 0 1px 0 rgba(var(--np-black), 0.03),
    0 14px 28px rgba(var(--np-black), 0.12);
}

[data-bs-theme="dark"] {
    --np-btn-border: rgba(var(--np-white), 0.12);

    /* primary */
    --np-btn-primary-bg: rgba(var(--np-brand-hover), 0.95);
    --np-btn-primary-bg-hover: rgba(var(--np-brand), 0.95);

    /* outline primary */
    --np-btn-op-border: rgba(var(--np-brand), 0.45);
    --np-btn-op-border-hover: rgba(var(--np-brand), 0.70);
    --np-btn-op-text: rgba(var(--np-white), 0.92);
    --np-btn-op-bg: rgba(var(--np-ink), 0.35);
    --np-btn-op-bg-hover: rgba(var(--np-brand), 0.18);

    /* danger */
    --np-btn-danger-bg: rgba(var(--np-danger-strong), 0.90);
    --np-btn-danger-bg-hover: rgba(var(--np-danger), 0.92);
    --np-btn-danger-ring: 0 0 0 4px rgba(var(--np-danger), 0.20);

    /* outline danger */
    --np-btn-od-border: rgba(var(--np-danger), 0.55);
    --np-btn-od-border-hover: rgba(var(--np-danger), 0.78);
    --np-btn-od-text: rgba(var(--np-white), 0.92);
    --np-btn-od-bg: rgba(var(--np-ink), 0.35);
    --np-btn-od-bg-hover: rgba(var(--np-danger), 0.16);
}

.np-btn,
.btn.np-btn {
    height: var(--np-control-h);
    padding: 0 14px;
    border-radius: var(--np-btn-radius);
    font-weight: 750;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}

.np-btn:disabled,
.btn.np-btn:disabled,
.np-btn.disabled,
.btn.np-btn.disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.np-btn:focus {
    outline: none;
}

.np-btn-sm,
.btn.np-btn-sm {
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .875rem;
}

/* TABLE ACTION */
.table-action-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background-color 140ms ease, transform 120ms ease, box-shadow 140ms ease,
    opacity 140ms ease;
    background: transparent;
    border: 1px solid transparent;
}

.table-action-btn {
    width: 40px;
    height: 40px;
}

.table-action-btn:hover {
    background: rgba(var(--np-ink), 0.14);
    box-shadow: 0 1px 0 rgba(var(--np-black), 0.04);
}

[data-bs-theme="dark"] .table-action-btn:hover {
    background: rgba(var(--np-white), 0.08);
    box-shadow: inset 0 0 0 1px rgba(var(--np-white), 0.08);
}

.table-action-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(var(--np-ink), 0.14);
    background: rgba(var(--np-ink), 0.14);
}

[data-bs-theme="dark"] .table-action-btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(var(--np-brand), 0.22);
    background: rgba(var(--np-white), 0.08);
}

/* PRIMARY */

.np-btn-primary,
.btn.np-btn-primary {
    border: 1px solid var(--np-btn-border);
    background: var(--np-btn-primary-bg);
    color: var(--np-btn-primary-text);
    box-shadow: var(--np-btn-shadow);
}

.np-btn-primary:hover,
.btn.np-btn-primary:hover {
    background: var(--np-btn-primary-bg-hover);
    box-shadow: var(--np-btn-shadow-hover);
    transform: translateY(-1px);
    color: var(--np-btn-primary-text);
}

.np-btn-primary:active,
.btn.np-btn-primary:active {
    transform: translateY(1px);
    box-shadow: var(--np-btn-shadow);
}

.np-btn-primary:focus-visible,
.btn.np-btn-primary:focus-visible {
    outline: none;
    box-shadow: var(--np-btn-ring), var(--np-btn-shadow-hover);
}

/* OUTLINE PRIMARY */

.np-btn-outline-primary,
.btn.np-btn-outline-primary {
    border: 1px solid var(--np-btn-op-border);
    background: var(--np-btn-op-bg);
    color: var(--np-btn-op-text);
    box-shadow: var(--np-btn-op-shadow);

    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

.np-btn-outline-primary:hover,
.btn.np-btn-outline-primary:hover {
    border-color: var(--np-btn-op-border-hover);
    background: var(--np-btn-op-bg-hover);
    color: var(--np-btn-op-text);

    transform: translateY(-1px);
    box-shadow: var(--np-btn-op-shadow-hover);
}

.np-btn-outline-primary:active,
.btn.np-btn-outline-primary:active {
    transform: translateY(1px);
    box-shadow: var(--np-btn-op-shadow);
}

.np-btn-outline-primary:focus-visible,
.btn.np-btn-outline-primary:focus-visible {
    outline: none;
    box-shadow: var(--np-btn-ring), var(--np-btn-op-shadow-hover);
}

/* DANGER */

.np-btn-danger,
.btn.np-btn-danger {
    border: 1px solid var(--np-btn-border);
    background: var(--np-btn-danger-bg);
    color: var(--np-btn-danger-text);
    box-shadow: var(--np-btn-shadow);
}

.np-btn-danger:hover,
.btn.np-btn-danger:hover {
    background: var(--np-btn-danger-bg-hover);
    box-shadow: var(--np-btn-shadow-hover);
    transform: translateY(-1px);
    color: var(--np-btn-danger-text);
}

.np-btn-danger:active,
.btn.np-btn-danger:active {
    transform: translateY(0px);
    box-shadow: var(--np-btn-shadow);
}

.np-btn-danger:focus-visible,
.btn.np-btn-danger:focus-visible {
    outline: none;
    box-shadow: var(--np-btn-danger-ring), var(--np-btn-shadow-hover);
}

/* OUTLINE DANGER */

.np-btn-outline-danger,
.btn.np-btn-outline-danger {
    border: 1px solid var(--np-btn-od-border);
    background: var(--np-btn-od-bg);
    color: var(--np-btn-od-text);
    box-shadow: var(--np-btn-od-shadow);

    backdrop-filter: blur(12px) saturate(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

.np-btn-outline-danger:hover,
.btn.np-btn-outline-danger:hover {
    border-color: var(--np-btn-od-border-hover);
    background: var(--np-btn-od-bg-hover);
    color: var(--np-btn-od-text);
    box-shadow: var(--np-btn-od-shadow-hover);
    transform: translateY(-1px);
}

.np-btn-outline-danger:active,
.btn.np-btn-outline-danger:active {
    transform: translateY(-1px);
    box-shadow: var(--np-btn-od-shadow);
}

.np-btn-outline-danger:focus-visible,
.btn.np-btn-outline-danger:focus-visible {
    outline: none;
    box-shadow: var(--np-btn-danger-ring), var(--np-btn-od-shadow-hover);
}

.np-hyperlink-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.np-hyperlink-list li {
    margin: 0 0 8px;
}

.np-hyperlink-list li:last-child {
    margin-bottom: 0;
}

/* HYPERLINK */
.np-hyperlink,
a.np-hyperlink {
    display: inline-block;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease, text-decoration-color .15s ease, opacity .15s ease, background-color .15s ease;
}

.np-hyperlink:hover,
a.np-hyperlink:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    transform: translateY(-1px);
}

.np-hyperlink:focus-visible,
a.np-hyperlink:focus-visible {
    outline: none;
    border-radius: 6px;
    box-shadow: var(--np-btn-ring);
}

.np-hyperlink:disabled,
a.np-hyperlink.disabled {
    opacity: .55;
    pointer-events: none;
}

/* PRIMARY HYPERLINK */

.np-hyperlink-primary,
a.np-hyperlink-primary {
    color: rgba(var(--np-brand-dark), 0.98);
    text-decoration-color: rgba(var(--np-brand-dark), 0.35);
}

.np-hyperlink-primary:hover,
a.np-hyperlink-primary:hover {
    color: rgba(var(--np-brand-hover), 1);
    text-decoration-color: rgba(var(--np-brand-hover), 0.6);
}

.np-hyperlink-primary:active,
a.np-hyperlink-primary:active {
    color: rgba(var(--np-brand-dark), 0.88);
}

[data-bs-theme="dark"] .np-hyperlink-primary,
[data-bs-theme="dark"] a.np-hyperlink-primary {
    color: rgba(var(--np-white), 0.94);
    text-decoration-color: rgba(var(--np-brand), 0.4);
}

[data-bs-theme="dark"] .np-hyperlink-primary:hover,
[data-bs-theme="dark"] a.np-hyperlink-primary:hover {
    color: rgba(var(--np-white), 0.96);
    text-decoration-color: rgba(var(--np-brand), 0.7);
}

/* ACTIVE */
.np-hyperlink-active,
a.np-hyperlink-active {
    color: rgba(var(--np-brand-dark), 1);
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(var(--np-brand-dark), 0.65);
}

[data-bs-theme="dark"] .np-hyperlink-active,
[data-bs-theme="dark"] a.np-hyperlink-active {
    color: rgba(var(--np-white), 0.98);
    text-decoration-color: rgba(var(--np-brand), 0.8);
}