.file-drop { top: 0; left: 0; position: fixed; background: var(--color-background-overlay); opacity: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: 5; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center; &.file-drop--show { opacity: 1; pointer-events: all; transition: opacity 0.3s ease; } .file-drop__area { display: flex; min-width: 400px; align-items: center; flex-direction: column; padding: var(--spacing-large); .main-icon { margin: var(--spacing-small); } p { margin-bottom: var(--spacing-large); } } }