InspectMenu { position: absolute; width: 100%; height: 100%; pointer-events: all; text-align: center; z-index: 2; .inspect-container { position: absolute; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.25s ease-out; .header-panel { flex-direction: row; align-items: center; .avatar-image { width: 80px; height: 80px; margin: 10px; border-radius: 4px; } .role-label { font-size: 50px; font-weight: 500; margin: 10px; } .player-label { font-size: 50px; font-weight: 500; margin: 10px; } } .call-detective { position: absolute; top: -10px; } .icons-container { max-width: 50%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 25px; } .inspect-details-label { margin: 25px; font-size: 18px; transition: opacity 0.25s ease-out; opacity: 0; &.fade-in { opacity: 1; } } } } InspectEntry { flex-direction: column; width: 90px; height: 90px; margin: 20px; align-items: center; justify-content: center; padding: 8px; box-shadow: 0 0 10px black; transition: transform 0.1s ease-in; &:hover { transform: scale(1.05); cursor: pointer; } .inspect-icon { background-repeat: no-repeat; background-size: contain; height: 100%; width: 100%; } .quick-label { position: absolute; bottom: -28px; text-align: center; font-weight: 600; font-size: 14px; white-space: nowrap; } }