.custom-select-container {
  position: relative;
  box-sizing: border-box;
}
.custom-select-container * {
  box-sizing: border-box;
}
.custom-select-container.is-disabled {
  opacity: .333;
}
.custom-select-opener {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 15rem;
  padding: 15rem;
  background: #111111;
  border: 1rem solid #4B4B4B;
  border-radius: 20rem;
  font-size: 17rem;
  line-height: 26rem;
  cursor: pointer;
  transition: .3s ease;

  &:hover {
    background: #FFA800;
  }

  &:after {
    width: 10rem;
    height: 7rem;
    background: url(../img/icons/dropdown__arrow.svg) center center / auto no-repeat;
    transition: .3s ease;
    content: '';
  }
}

.is-open {
  .custom-select-opener {
    &:after {
      transform: rotate(180deg);
    }
  }
}

.custom-select-container select {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.custom-select-panel {
  max-height: 0;
  transition: opacity .3s ease, top .3s ease;
  overflow: hidden;
  background-color: #111111;
  border-radius: 0 0 20rem 20rem;
  position: absolute;
  top: 88%;
  z-index: 2;
  width: 100%;
  opacity: 0;

  &::-webkit-scrollbar {
    width: 3rem;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: #FFFFFF;
    border-radius: 25rem 0 0 25rem;
  }
}
.custom-select-container.is-open .custom-select-panel {
  top: 98%;
  max-height: 230rem;
  overflow-y: auto;
  border: 1rem solid #4B4B4B;
  border-top: none;
  opacity: 1;
}
.custom-select-option {
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding: 9rem 15rem;
  font-size: 17rem;
  line-height: 26rem;
  cursor: pointer;
  transition: .3s ease;

  &:first-child {
    display: none;
  }
}
.custom-select-option::after {
  width: 25rem;
  height: 25rem;
  background: rgba(172, 172, 172, 0.2);
  border-radius: 50%;
  content: '';
}
.custom-select-option:hover::after {
  background: #FFFFFF;
}
.custom-select-option.has-focus {
  background: #FFA800;
}
.custom-select-option.is-selected::after {
  background: url(../img/icons/check.svg) center center / 25rem no-repeat;
}
.custom-select-optgroup > .custom-select-option {
  padding-left: 2em;
}
.custom-select-optgroup::before {
  content: attr(data-label);
  display: block;
  padding: 0.5em;
  color: #888;
}