/* ===== Webring Styles ===== */
.window-content.webrings {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

webring-element {
    border: 1px solid var(--border-color);
    display: block;
    height: 32px;
}

webring-element p.ring-info {
    text-align: center;
}

webring-element p.ring-body {
    text-align: center;
    grid-auto-flow: column;
}

webring-element .ring-body {
    display: grid;
    position: relative;
    bottom: 32px;
}

webring-element .ring-body a.left::before,
webring-element .ring-body a.right::after {
    line-height: 0;
}

webring-element .ring-body a {
    text-decoration: none;
    padding: 0 5px;
}

webring-element .ring-body a.left {
    justify-self: start;
}

webring-element .ring-body a.left::before {
    content: "<";
    padding-right: 5px;
}

webring-element .ring-body span.middle {
    display: none;
}

webring-element .ring-body a.right {
    justify-self: end;
}

webring-element .ring-body a.right::after {
    content: ">";
    padding-left: 5px;
}

/* Simpler webring */
.webring-nav-a {
    height: 32px;
    border: 1px solid var(--border-color);
    padding-left: 4px;
    padding-right: 4px;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
}

.webring-nav-a a {
    text-decoration: none;
    text-align: center;
}

.webring-nav-a a:first-child::before {
    content: "<";
    padding-right: 5px;
}

.webring-nav-a a:last-child::after {
    content: ">";
    padding-left: 5px;
}