@layer components{ul#relation-list{margin:0;padding:0;list-style:none;& li{list-style:none}}.relation-card{border:var(--border);border-radius:var(--rounding);background-color:var(--background-panel);transition:border-color var(--duration-very-fast) ease-in-out, box-shadow var(--duration-very-fast) ease-in-out;flex-direction:row;align-items:center;gap:.5rem;padding:1rem;display:flex;&:hover{border-color:var(--foreground-secondary)}& a{flex-direction:row;flex-grow:1;text-decoration:none;display:flex;& .left{flex-direction:column;flex-grow:1;justify-content:space-between;gap:.5rem;display:flex}& .word-text{color:var(--foreground-primary);font-weight:600}& .word-definition{color:var(--foreground-secondary);font-size:.875rem}& .relation-language-code{color:var(--foreground-secondary);border:1px solid var(--foreground-secondary);border-radius:var(--rounding);text-transform:uppercase;margin-left:.5rem;padding:.175rem .425rem;font-size:.8rem;& .tooltip{text-transform:none;font-size:.75rem}}}& .relation-actions{align-items:center;gap:.5rem;display:flex}}}