.dropdown {
  max-width: 230px;
  padding: 8px;
  border: 1px solid gray;
}
.dropdown-toggle {
  border-bottom: 1px solid grey;
  cursor: pointer;
  display: flex;
  align-items: center;

  &::after {
    width: 0;
    height: 0;
    margin-left: 5px;
    top: 3px;
    position: relative;
    border: 4px solid transparent;
    border-top: 6px solid #ff9522;
    transition: border-top-color 0.2s ease-in-out;
    content: "";
  }
}

.dropdown-menu {
  padding-top: 8px;
  display: none;
}

.dropdown-active {
  &::after {
    margin-top: -4px;
    transform: rotate(180deg);
  }

  + .dropdown-menu {
    display: block;
  }
}

label {
  display: block;
}

$(document).ready(function () {
  /* BEGIN: Раскрываем и сворачиваем список dropdown */
  let dropdown = $('.js__dropdown'),
    dropdownActive = 'dropdown-active',
    dropdownToggle = $('.js__dropdown-toggle');

  dropdownToggle.click(function () {
    if (!$(this).hasClass(dropdownActive)) {
      $('.js__dropdown-toggle.dropdown-active').removeClass(dropdownActive);
      $(this).addClass(dropdownActive);
    } else {
      $(this).removeClass(dropdownActive);
    }
  });

  $('.js__dropdown-close').click(function () {
    $('.dropdown-active').removeClass(dropdownActive);
  });

  $(document).mouseup(function (e) {
    if (!dropdown.is(e.target) && dropdown.has(e.target).length === 0) {
      dropdownToggle.removeClass(dropdownActive);
    }
  });
  /* END */
});