.bottom-sheet-backdrop { position: fixed; inset: 0; background-color: rgba(165, 165, 165, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 1002; } .bottom-sheet-backdrop.show { opacity: 1; pointer-events: auto; } .bottom-sheet-container { position: fixed; bottom: -200%; left: 0; right: 0; transition: bottom 0.3s ease; z-index: 1003; } .bottom-sheet-container.show { bottom: 0; } .bottom-sheet { background-color: var(--mud-palette-surface); border-top-left-radius: 16px; border-top-right-radius: 16px; padding: 4px 16px 16px; box-shadow: 0 -2px 10px rgba(165, 165, 165, 0.5); } .clearButton .mud-icon-button { padding: 4px !important; } .bottom-sheet .closeIcon .mud-icon-root { border-radius: 50%; padding: 2px; min-width: 15px; min-height: 15px; padding: 4px; background: var(--mud-palette-gray-light); color: var(--mud-palette-surface); } .button-section { display: flex; justify-content: end; gap: .75rem; margin-top: 2rem; }