item.module.css

:global(.box-link) {
    --shadow: 0 2px 3px light-dark(hsla(51, 50%, 44%, .35), #232321);

    display: flex;
    align-items: center;
    width: 100%;
    height: var(--space-2xl);
    padding: 0 var(--space-s);
    background-color: light-dark(white, #141413);
    color: light-dark(#525252, #f9f7ec);
    text-decoration: none;
    border-radius: var(--space-3xs);
    box-shadow: var(--shadow);
    transition: background-color var(--transition-slow);

    &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--yellow500), var(--shadow);
    }

    &:hover, &:focus-visible {
        color: light-dark(#525252, #f9f7ec);
        background-color: light-dark(hsl(58deg 72% 97%), hsl(204, 3%, 11%));
        transition: background-color var(--transition-instant);
    }

    &:active {
        transform: translateY(2px);
        --shadow: inset 0 0 0 1px hsla(51, 50%, 44%, .15);
    }
}

.left {
    flex-grow: 1;
    width: 0;
}

.title, .subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title {
    font-size: 16px;
}

.subtitle {
    margin-top: var(--space-3xs);
    font-size: 13px;
    color: light-dark(rgb(118, 131, 138), #cccac2);
}

.right {
    flex-shrink: 0;
    height: var(--space-s);
    width: auto;
    margin-left: var(--space-xs);
    color: light-dark(rgb(118, 131, 138), #cccac2);
}