.tab-bar {
    flex: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    border-block-start: 1px solid rgb(255 255 255 / 0.18);
    background: #111;
    list-style: none;

    li { display: contents }

    label {
        position: relative;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 0.3125rem;
        min-block-size: 3.75rem;
        color: #8a8a8a;
        font-size: 0.625rem;
        font-weight: 500;
        cursor: pointer;

        &:hover { background: rgb(255 255 255 / 0.06) }

        svg {
            inline-size: 1.25rem;
            block-size: 1.25rem;
        }
    }

    :checked + label {
        color: #5eaadf;

        &::before {
            content: '';
            position: absolute;
            inset: 0 1.375rem auto;
            block-size: 0.125rem;
            background: currentColor;
        }
    }
}