.gui-sitesearch { display: flex; background-color: var(--gui-color-white); border-radius: 30px; width: 100%; position: relative; z-index: 10; } .gui-sitesearch-filter-dropdown { display: flex; align-items: center; justify-content: space-between; margin-left: -25px; width: 110px; background-color: #f1f1f1; color: var(--gui-color-font); border: none; border-radius: 30px 0 0 30px; font-size: 15px; letter-spacing: 0.5px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25em auto; box-shadow: none; cursor: pointer; } .gui-sitesearch-filter-dropdown:hover { cursor: pointer; } .gui-sitesearch-dropdown-menu { position: absolute; top: 100%; left: 0; width: 150px; max-height: 200px; overflow-y: auto; background-color: var(--gui-color-white); border: 1px solid #ddd; border-radius: var(--gui-border-radius); padding: 5px 0; list-style: none; margin: 5px 0 0 0; z-index: 100; display: none; } .gui-sitesearch-dropdown-menu.active { display: block; } .gui-sitesearch-dropdown-menu-item { padding: 8px 12px; white-space: nowrap; color: var(--gui-color-font); cursor: pointer; } .gui-sitesearch-dropdown-menu-item:hover, .gui-sitesearch-dropdown-menu-item.selected { background-color: var(--gui-element-bg); } .gui-sitesearch-input { flex-grow: 1; padding: 10px 15px; border: none; font-size: 15px; outline: none; color: var(--gui-color-font); border-left: 1px dotted var(--gui-element-fg); } .gui-sitesearch-button { display: flex; align-items: center; justify-content: center; background-color: var(--gui-color-white); color: var(--gui-element-fg); border: none; border-radius: 0; font-size: 20px; outline: none; cursor: pointer; } .gui-sitesearch-button:hover { color: var(--gui-color-primary); }