/* buttons */

.btn
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;

    padding: 0 14px;
    border: 0;
    border-radius: var(--radius-max);

    cursor: pointer;
    transition: .18s ease;
    width: 100%;
}

.btn:hover {
    opacity: .82;
}

.btn-primary-b {
    background: var(--gradient-b);
    color: var(--color-bg-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
}

.btn-primary-b0 {
    background: var(--gradient-b0);
    color: var(--color-back-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
}

.btn-primary-bb {
    background: var(--gradient-bb);
    color: var(--color-back-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
}

.btn-primary-lb {
    background: var(--gradient-lb);
    color: var(--color-back-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
}

.btn-primary-lbb {
    background: var(--gradient-lbb);
    color: var(--color-back-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
}

.btn-primary-g {
    background: var(--gradient-g);
    color: var(--color-back-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
}

.btn-primary-o {
    background: var(--gradient-o);
    color: var(--color-back-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
}

.btn-primary-n {
    background: var(--gradient-n);
    color: var(--color-back-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
}

.btn-primary-blg {
    background: var(--gradient-blg);
    color: var(--color-back-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
}

.btn-primary-w {
    background: var(--gradient-card);
    color: var(--color-primary-nn);
    font-size: var(--text-sm);
    font-weight: var(--weight-sm);
}

.btn-primary-w:hover {
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
    opacity: .82;
    font-size: var(--text-md);
    color: var(--color-primary-nn);
}
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 0 18px;

    border-radius: var(--radius-button);

    background: #f2f4f7;
    color: var(--color-text);

    font-size: 15px;
    font-weight: 600;
}


/*tabs, switchers*/


.gen-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 24px;
    padding: 4px;

    background:  var( --color-w0) ;
    border-radius: 999px;
    border: 1px solid var(--color-border-soft);
}

.gen-view-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 0 14px;

    border-radius: 999px;
    color: var(--color-muted);
    font-size: var(--text-sm);;
    font-weight: var(--weight-sm);
    text-decoration: none;
}

.gen-view-switch a.active {
    background: var(--gradient-b);
    color:var(--color-bg-0);
    box-shadow: var(--shadow-box);
}

.gen-view-switch .gen-variant-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 0 14px;

    border: 0;
    border-radius: 999px;

    background: transparent;

    font-size: var(--text-sm);;
    font-weight: var(--weight-sm);
    color: #667085;
    cursor: pointer;
}

.gen-view-switch .gen-variant-button.active {
    background: var(--gradient-lb);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
}


.filter-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--color-bg-0);
    border: 0px solid var(--color-border);
    color: var(--color-muted);
    text-decoration: none;
    font-size: var(--text-sm);;
    font-weight: var(--weight-sm);
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.filter-pill:hover {
    background: var(--color-bg);
    color: var(--color-muted);
}

.filter-pill.active {
    border-color: var(--color-primary-b);
    background: var(--gradient-b);
    color: var(--color-text-bright);
}

.filter-pill.active-parent {
    background: var(--gradient-b);
    border-color: var(--color-primary-bb);
}

.filter-pill.active-parent:hover {
    background: var(--gradient-bb);
    border-color: var(--color-primary-b);
}

.filter-pill-sub {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--color-back-0);
    border-color: var(--color-border-soft);
    min-height: 40px;
}

.filter-pill-sub.active {
    border-color: var(--color-primary-b);
    background: var(--gradient-b0);
    color: var(--color-text-w);
        box-shadow:
        0 4px 12px rgba(37, 99, 235, .18);
}

.filter-pill-sub:hover {
    border-color: var(--color-primary-b0);
}