.city-select{--border:1px solid var(--color-brown);--border-radius:var(--border-r-sm);--px:20px;position:relative;width:100%}.city-select.open .city-select__btn{border-bottom-right-radius:0;border-bottom-left-radius:0}.city-select.open .city-select__btn::after{transform:translateY(-50%) rotate(225deg)}.city-select.open .city-select__options{opacity:1;visibility:visible}.city-select__btn{width:100%;padding:10px 42px 10px var(--px);position:relative;border:1px solid var(--color-brown);border-radius:var(--border-radius);background-color:var(--color-white);text-align:left}.city-select__btn:empty::before{content:attr(data-empty);display:block;color:var(--color-light-brown)}.city-select__btn::after{content:"";position:absolute;top:50%;right:22px;width:8px;height:8px;border:var(--border);border-color:var(--color-brown);border-top-color:transparent;border-left-color:transparent;transform:translateY(-50%) rotate(45deg);transform-origin:center;transition:transform .2s}.city-select__options{position:absolute;z-index:1;top:100%;left:0;width:100%;max-height:320px;padding:10px 0;overflow-y:scroll;border:var(--border);border-top:none;border-radius:0 0 var(--border-radius) var(--border-radius);background-color:var(--color-white);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.city-select__option{width:100%;padding:8px var(--px);text-align:left;cursor:pointer}.city-select__option:hover,.city-select__option[aria-selected=true]{background-color:var(--color-dark-green);color:var(--color-white)}.city-select__option[aria-selected=true]{pointer-events:none;cursor:default}