[data-component='Settings'] { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 19999; background-color: rgba(000, 000, 000, 0.5); AppearFadeIn(500ms); > .dialog { position: absolute; width: 40vmin; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 4px; box-shadow: 0px 3px 12px 2px rgba(#111, 0.4); padding: 1vmin; > .header { > span { font-size: 2vmin; font-weight: 400; } } > .settings { .Dropdown-root { position: relative; padding: 0.3vmin; } .Dropdown-control { position: relative; overflow: hidden; background-color: white; border: 1px solid #ccc; border-radius: 2px; box-sizing: border-box; color: #333; cursor: default; outline: none; padding: 8px 52px 8px 10px; transition: all 200ms ease; } .Dropdown-control:hover { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } .Dropdown-arrow { border-color: #999 transparent transparent; border-style: solid; border-width: 5px 5px 0; content: ' '; display: block; height: 0; margin-top: -ceil(2.5); position: absolute; right: 10px; top: 14px; width: 0 } .is-open .Dropdown-arrow { border-color: transparent transparent #999; border-width: 0 5px 5px; } .Dropdown-menu { background-color: white; border: 1px solid #ccc; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); box-sizing: border-box; margin-top: -1px; max-height: 200px; overflow-y: auto; position: absolute; top: 100%; width: 100%; z-index: 1000; -webkit-overflow-scrolling: touch; } .Dropdown-menu .Dropdown-group > .Dropdown-title { padding: 8px 10px; color: rgba(51, 51, 51, 1.2); font-weight: bold; text-transform: capitalize; } .Dropdown-option { box-sizing: border-box; color: rgba(51, 51, 51, 0.8); cursor: pointer; display: block; padding: 8px 10px; } .Dropdown-option:last-child { border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; } .Dropdown-option:hover { background-color: #f2f9fc; color: #333; } .Dropdown-option.is-selected { background-color: #f2f9fc; color: #333; } .Dropdown-noresults { box-sizing: border-box; color: #ccc; cursor: default; display: block; padding: 8px 10px; } } > .footer { bottom: 0; right: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; > .button { flex: 0 0 auto; margin: 1vmin; background-color: rgba(#000, 0.8); color: #fff; cursor: pointer; border-radius: 4px; padding: 0.5vmin; } } } }