/*
 * Row of redirect buttons (View site, Go to Kibela, switch profile)
 * shown above the tiles of every profile dashboard - see
 * templates/profile_redirect_bar.html. Loaded once from
 * templates/base.html.
 */
.redirect-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0 20px;
}
.redirect-bar-form { margin: 0; }

.redirect-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
}
.redirect-btn i { font-size: 12px; }
.redirect-btn:hover { transform: translateY(-1px); }
.redirect-btn:active { transform: translateY(0); }

/* View site - outlined, the only one that opens a new tab. */
.redirect-btn--site {
    background: transparent;
    color: var(--t-primary);
    border-color: var(--t-primary);
}
.redirect-btn--site:hover { background: rgb(var(--t-primary-ch) / .08); }

.redirect-btn--kibela { background: #233876; }
.redirect-btn--kibela:hover { background: #1a2a5c; }

/* #6a1b9a matches the Developer profile's own topbar color. */
.redirect-btn--developer { background: #6a1b9a; }
.redirect-btn--developer:hover { background: #56157c; }

.redirect-btn--manager { background: #b35a00; }
.redirect-btn--manager:hover { background: #8f4800; }

.redirect-btn--editor { background: #2f7a4f; }
.redirect-btn--editor:hover { background: #245f3d; }