.wrap {
  max-width: 100%;
  min-width: 150px
}
.select {
  width: 100%;
  position: relative; 
}
.select.open .select__dropdown {
  display: block;
}
.select.open .select__input {
  /* border-bottom: none; */
}
.select.open .select__backdrop {
  display: block;
  z-index: 1;
}
.select__input {
  border: 1px solid #ccc;
  border-radius: 5px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  cursor: pointer;
  position: relative;
  z-index: 3;
}
.select__arrow {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 40px;
  height: 100%; 
  transition: transform 0.2s ease;
}
.select__arrow::before {
	content: '';
	position: absolute; 
	display: block;
	height: 16px;
	width: 16px;
	left: calc(50% - 8px);
	top: calc(50% - 8px);  
	background: url('chevron.svg') center center / 100% no-repeat;
	
}
.open .select__arrow { 
  transform: rotateX(180deg);
}
.select__dropdown {
  display: none;
  position: absolute;
  z-index: 4;
  border: 1px solid #ccc;
  background-color: #fff;
  border-radius: 5px;
  top: 46px;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3);
}
.select__list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.select__backdrop {
  position: fixed;
  display: none;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: transparent;
}
.select__item {
  padding: 1rem;
  border-bottom: 1px solid #ccc;
}
.select__item.selected {
  background-color: bisque;
}
.select__item:hover {
  background-color: #eee;
  cursor: pointer;
  transition: 0.15s background-color ease-in;
}