.locationDialogMask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: flex-end; justify-content: center; z-index: 10000; animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .locationDialogContainer { width: 100%; background: transparent; animation: slideUp 0.3s ease-out; padding-bottom: 20px; background: #ffffff; border-radius: 20px 20px 0px 0px; height: 246px; } .locationDialogContent { display: flex; flex-direction: column; align-items: center; overflow: hidden; margin-left: 24px; margin-right: 24px; } .locationDialogTitle { padding-top: 48px; padding-bottom: 32px; margin-left: 32px; margin-right: 32px; font-family: "PingFang SC"; font-weight: 600; font-size: 20px; line-height: 28px; text-align: center; color: #000000; } .locationDialogButtons { display: flex; flex-direction: column; padding-bottom: 20px; width: calc(100% - 40px); } .locationDialogButton { width: 100%; display: flex; align-items: center; justify-content: center; border-radius: 16px; cursor: pointer; transition: opacity 0.2s; margin-top: 20px; position: relative; z-index: 1; user-select: none; -webkit-tap-highlight-color: transparent; &:first-child { margin-top: 0; } &.primary { background: #000000; height: 52px; &:active { opacity: 0.8; } } &.secondary { width: 100%; background: #ffffff; height: 52px; border: 1px solid rgba(0, 0, 0, 0.1); &:active { background: rgba(0, 0, 0, 0.05); } } } .locationDialogButtonText { font-family: "PingFang SC"; font-weight: 600; font-size: 16px; line-height: 22px; text-align: center; pointer-events: none; user-select: none; &.primary { color: #ffffff; } &.secondary { color: #000000; } }