.dimensions { width: 35rem; height: 45rem; padding: 0; } .title { box-shadow: var(--shadow-bottom); padding: 1.5rem 0 1rem 0; margin-top: 0; } .content { margin: 0; } .spell-list { height: 32rem; padding: 1rem 1rem 0 1rem; overflow-y: auto; gap: 0.5rem; } .spell { height: 3rem; padding: 15px 10px; margin-bottom: 0.5rem; color: rgba(0, 0, 0, 0.87); display: flex; align-items: center; justify-content: space-between; background: var(--items); border-radius: 10px; border: var(--border); font-size: 1rem; font-weight: 600; // text-align: center; cursor: pointer; box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 8px 1px rgba(0, 0, 0, 0.14), 0 3px 10px 2px rgba(0, 0, 0, 0.12); transition: background-color 0.2s ease-in-out; &:hover { background-color: #f8d8c6; } } .selected { background-color: #f8d8c6; box-sizing: border-box; border: 3px solid var(--primary); &:hover { background-color: var(--items); } } .horizontal-buttons { box-shadow: var(--shadow-top); }