.card { background-color: var(--white); border-radius: 10px; box-shadow: var(--card-shadow); padding: 10px; } .popover { position: relative; } .popover-content { position: absolute; animation: slide-in 0.3s ease; right: 0; top: calc(100% + 10px); } .popover-mask { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; } @keyframes slide-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .list-item { display: flex; justify-content: space-between; align-items: center; min-height: 40px; border-bottom: var(--border-in-light); padding: 10px 20px; animation: slide-in ease 0.6s; } .list { border: var(--border-in-light); border-radius: 10px; box-shadow: var(--card-shadow); margin-bottom: 20px; animation: slide-in ease 0.3s; } .list .list-item:last-child { border: 0; }