.groupnav {
    margin-top: var(--space-large);
    margin-bottom: var(--space-large);
}

.groupnav__title {
    max-width: 50ch;
    margin: 2rem auto;

    font-size: 1em;
    font-weight: bold;
}

.groupnav__container {
    max-width: 50ch;
    margin: 0 auto;
    padding: 0;

    list-style: none;
}

.groupnav__item {
    border: 1px solid var(--color-grey-line);
}

.groupnav__item + .groupnav__item {
    border-top: none;
}

.groupnav__anchor,
.groupnav__button {
    display: block;
    padding: var(--space-medium);

    color: var(--color-text);
    text-decoration: none;

    border-radius: 0;

    transition:
        background-color 0.3s ease-in-out,
        color 0.3s ease-in-out;
}

.groupnav__anchor {
    padding-left: 6rem;

    background-repeat: no-repeat;
    background-position: 1rem center;
}

.groupnav__button {
    width: 100%;
    padding-left: 6rem;

    font-size: 1em;
    text-align: left;

    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 1rem center;
    border: none;
    border-radius: 0;

    cursor: pointer;
}

.groupnav__anchor:hover,
.groupnav__anchor:focus,
.groupnav__button:hover,
.groupnav__button:focus {
    color: currentcolor;

    background-color: var(--color-accent-bg);
}

.groupnav__item--featured .groupnav__anchor,
.groupnav__item--featured .groupnav__button {
    color: var(--color-accent-text);
    font-weight: bold;
}

.groupnav__item--validate .groupnav__anchor,
.groupnav__item--create .groupnav__button {
    background-image: url("../../icons/check.svg");
}

.groupnav__item--subscription .groupnav__anchor {
    background-image: url("../../icons/credit-card.svg");
}

.groupnav__item--mastodon .groupnav__anchor {
    background-image: url("../../icons/mastodon.svg");
    background-size: 36px 36px;
}

.groupnav__item--import .groupnav__anchor {
    background-image: url("../../icons/upload.svg");
}

.groupnav__item--data .groupnav__anchor {
    background-image: url("../../icons/backup.svg");
}

.groupnav__item--credentials .groupnav__anchor {
    background-image: url("../../icons/key.svg");
}

.groupnav__item--sessions .groupnav__anchor {
    background-image: url("../../icons/connect.svg");
}

.groupnav__item--delete .groupnav__anchor {
    background-image: url("../../icons/trash.svg");
}

.groupnav__item--about .groupnav__anchor {
    background-image: url("../../icons/info.svg");
}

.groupnav__item--whats-new .groupnav__anchor {
    background-image: url("../../icons/bundle.svg");
}

.groupnav__item--onboarding .groupnav__anchor {
    background-image: url("../../icons/undo.svg");
}

.groupnav__item:first-child,
.groupnav__item:first-child .groupnav__anchor,
.groupnav__item:first-child .groupnav__button {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.groupnav__item:last-child,
.groupnav__item:last-child .groupnav__anchor,
.groupnav__item:last-child .groupnav__button {
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
}
