.__select { position: relative; width: auto; height: 38px; margin: 0 auto; }
.__select[data-state=active] .__select__title::before { transform: translate(-1px, -50%) rotate(-45deg); }
.__select[data-state=active] .__select__title::after { transform: translate(3px, -50%) rotate(45deg); }
.__select[data-state=active] .__select__content { opacity: 1; display: flex;}
.__select[data-state=active] .__select__label + .__select__input + .__select__label { max-height: 40px; border-top-width: 1px; }

.__select__title { display: flex; align-items: center; width: auto; padding: 8px 20px 8px 5px; border-radius: 5px; cursor: pointer; white-space: nowrap; height: 25px; }
.__select__title::before, .__select__title::after { content: ""; position: absolute; top: 50%; right: 8px; display: block; width: 6px; height: 2px; transition: all 0.3s ease-out; background-color: #333333; transform: translate(-1px, -50%) rotate(45deg); }
.__select__title::after { transform: translate(3px, -50%) rotate(-45deg); }
.__select__title:hover { border-color: #5897fb; }
.__select__title:hover::before, .__select__title:hover::after { background-color: #5897fb; }
.__select__content { position: absolute; top: 45px; left: -1px; display: none; flex-direction: column; width: 250px; background-color: #ffffff; border: 1px solid #c7ccd1; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; transition: all 0.3s ease-out; opacity: 0; z-index: 8; }

.__select__input { display: none; }
.__select__input:checked + label { background-color: #dedede; }
.__select__input:disabled + label { opacity: 0.6; pointer-events: none; }

.__select__label { display: flex; align-items: center; width: auto; height: 40px; padding: 0 16px; transition: all 0.2s ease-out; cursor: pointer; overflow: hidden; }
.__select__label + input + .__select__label { border-top: 0 solid #C7CCD160; }
.__select__label:hover { background-color: #5897fb !important; color: #ffffff; }