/*
 * custom-links.css
 * Drop this file next to your index.html.
 * Edit ONLY the <script id="custom-links-data"> block in index.html
 * to change labels, URLs, and SVG icons — no CSS knowledge needed.
 */

/* ── Container ──────────────────────────────────────────────────────────── */

#custom-links-control {
    margin-top: var(--ui-element-spacing);
}

/* ── Individual link buttons ─────────────────────────────────────────────── */

.custom-link-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border-bottom: .1rem solid var(--border-color) !important;
    position: relative;
}

.custom-link-btn:last-child {
    border-bottom: none !important;
}

/* ── SVG icon inside each button ─────────────────────────────────────────── */

.custom-link-btn .svg-icon {
    fill: currentColor;
    width:  2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    pointer-events: none;
}

/* ── Tooltip label shown on hover ─────────────────────────────────────────── */

.custom-link-btn::after {
    content: attr(data-label);
    position: absolute;
    left: calc(var(--ui-button-size) + var(--ui-element-spacing));
    white-space: nowrap;
    background-color: var(--background-base);
    color: var(--text-base);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: .5rem 1rem;
    font-size: 1.4rem;
    font-family: Raleway, sans-serif;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-.5rem);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 9999;
}

.custom-link-btn:hover::after,
.custom-link-btn:focus::after {
    opacity: 1;
    transform: translateX(0);
}