.root {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    background-color: var(--color-bg-base-light);
    z-index: 10;
}

.linkButton {
    background-color: var(--color-bg-base-light);
    border: var(--border-width-sm) solid var(--border-radius-xs);
    text-align: left;
    cursor: pointer;
    padding: 20px 16px;
    transition: background-color 0.3s ease;
    text-decoration: none;
}

.linkLabel {
    color: var(--color-text-primary);
}

.active {
    border-radius: var(--border-radius-xs);
}

.active[data-type='energy'] {
    background: linear-gradient(93deg, var(--color-bg-fill-brand-solar) 40.44%, #cab602 160.95%);
}

.active[data-type='senescence'] {
    background: linear-gradient(93deg, var(--color-bg-fill-brand-indigo) 40.44%, #2666a6 160.95%);
}

.active[data-type='metabolism'] {
    background: linear-gradient(93deg, var(--color-bg-fill-brand-orchre) 40.44%, #c87a04 160.95%);
}

.active[data-type='other'] {
    background: linear-gradient(93deg, var(--color-bg-neutral-medium) 40.44%, #888 160.95%);
}

.active[data-type='hormone'] {
    background: linear-gradient(93deg, var(--color-bg-fill-brand-lilac) 40.44%, var(--color-lilac-400) 160.95%);
}
