.pack-rank {
    padding-left: 2.5rem;
    transition: background-color 75ms ease-out;
}
 
.pack-name {
    margin-bottom: 0.7rem;
    margin-top: 0.5rem;
}
.pack-score {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-auto-rows: max-content;
    gap: 1rem;
}
 
.pack-records {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 1rem;
}
 
.pack-level-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
 
.pack-level-detail {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background-color: var(--color-background-hover);
    border-radius: 0.5rem;
    border-inline-start: 0.3rem solid transparent;
    cursor: pointer;
}
 
.pack-level-detail.error {
    opacity: 0.6;
    cursor: not-allowed;
}
 
.pack-level-detail-rank {
    min-width: 2.5rem;
    text-align: end;
}
 
.pack-level-detail-main {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
 
.pack-level-detail-name {
    background: none;
    border: none;
    color: var(--color-on-background);
    text-align: start;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}
 
.pack-level-detail-name:hover:not(:disabled) {
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 2px;
    text-decoration-line: underline;
}
 
.pack-level-detail-name:disabled {
    color: var(--color-error);
    cursor: not-allowed;
    text-decoration: line-through;
}
 
.pack-level-detail-creators {
    color: #b8b8b8;
}
 
.pack-level-detail-meta {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 0.15rem;
    color: #c8c8c8;
    white-space: nowrap;
}
 
.pack-level-detail-meta p {
    font-size: 14px;
    line-height: 18px;
}