li.opens-left > .is-dropdown-submenu {
  top: 100%;
  right: 0;
  left: auto;
}

.dropdown.menu > li.opens-right > .is-dropdown-submenu {
  top: 100%;
  right: auto;
  left: 0;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a {
  position: relative;
  padding-right: 1.5rem;
}

[data-whatinput="mouse"] .dropdown.menu a {
  outline: 0;
}

.dropdown.menu > li > a {
  padding: 0.7rem 1rem;
}

.dropdown.menu > li.is-active > a {
  background: 0 0;
  color: #1779ba;
}

.no-js .dropdown.menu ul {
  display: none;
}

.dropdown.menu .nested.is-dropdown-submenu {
  margin-right: 0;
  margin-left: 0;
}

.dropdown.menu.vertical > li .is-dropdown-submenu {
  top: 0;
}

.dropdown.menu.vertical > li.opens-left > .is-dropdown-submenu {
  top: 0;
  right: 100%;
  left: auto;
}

.dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu {
  right: auto;
  left: 100%;
}

.dropdown.menu.vertical > li > a::after {
  right: 14px;
}

.dropdown.menu.vertical > li.opens-left > a::after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
  content: "";
  border-left-width: 0;
  border-color: transparent #1779ba transparent transparent;
  right: auto;
  left: 5px;
}

.dropdown.menu.vertical > li.opens-right > a::after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
  content: "";
  border-right-width: 0;
  border-color: transparent transparent transparent #1779ba;
}

@media print, screen and (min-width: 40em) {
  .dropdown.menu.medium-horizontal > li.opens-left > .is-dropdown-submenu {
    top: 100%;
    right: 0;
    left: auto;
  }

  .dropdown.menu.medium-horizontal > li.opens-right > .is-dropdown-submenu {
    top: 100%;
    right: auto;
    left: 0;
  }

  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a {
    position: relative;
    padding-right: 1.5rem;
  }

  .dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: "";
    border-bottom-width: 0;
    border-color: #1779ba transparent transparent;
    right: 5px;
    left: auto;
    margin-top: -3px;
  }

  .dropdown.menu.medium-vertical > li .is-dropdown-submenu {
    top: 0;
  }

  .dropdown.menu.medium-vertical > li.opens-left > .is-dropdown-submenu {
    top: 0;
    right: 100%;
    left: auto;
  }

  .dropdown.menu.medium-vertical > li.opens-right > .is-dropdown-submenu {
    right: auto;
    left: 100%;
  }

  .dropdown.menu.medium-vertical > li > a::after {
    right: 14px;
  }

  .dropdown.menu.medium-vertical > li.opens-left > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: "";
    border-left-width: 0;
    border-color: transparent #1779ba transparent transparent;
    right: auto;
    left: 5px;
  }

  .dropdown.menu.medium-vertical > li.opens-right > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: "";
    border-right-width: 0;
    border-color: transparent transparent transparent #1779ba;
  }
}

@media print, screen and (min-width: 64em) {
  .dropdown.menu.large-horizontal > li.opens-left > .is-dropdown-submenu {
    top: 100%;
    right: 0;
    left: auto;
  }

  .dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu {
    top: 100%;
    right: auto;
    left: 0;
  }

  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a {
    position: relative;
    padding-right: 1.5rem;
  }

  .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: "";
    border-bottom-width: 0;
    border-color: #1779ba transparent transparent;
    right: 5px;
    left: auto;
    margin-top: -3px;
  }

  .dropdown.menu.large-vertical > li .is-dropdown-submenu {
    top: 0;
  }

  .dropdown.menu.large-vertical > li.opens-left > .is-dropdown-submenu {
    top: 0;
    right: 100%;
    left: auto;
  }

  .dropdown.menu.large-vertical > li.opens-right > .is-dropdown-submenu {
    right: auto;
    left: 100%;
  }

  .dropdown.menu.large-vertical > li > a::after {
    right: 14px;
  }

  .dropdown.menu.large-vertical > li.opens-left > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: "";
    border-left-width: 0;
    border-color: transparent #1779ba transparent transparent;
    right: auto;
    left: 5px;
  }

  .dropdown.menu.large-vertical > li.opens-right > a::after {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    content: "";
    border-right-width: 0;
    border-color: transparent transparent transparent #1779ba;
  }
}

.dropdown.menu.align-right .is-dropdown-submenu.first-sub {
  top: 100%;
  right: 0;
  left: auto;
}

.is-dropdown-menu.vertical {
  width: 100px;
}

.is-dropdown-menu.vertical.align-right {
  float: right;
}

.is-dropdown-submenu-parent {
  position: relative;
}

.is-dropdown-submenu-parent a::after {
  position: absolute;
  top: 50%;
  right: 5px;
  left: auto;
  margin-top: -6px;
}

.is-dropdown-submenu-parent.opens-inner > .is-dropdown-submenu {
  top: 100%;
  left: auto;
}

.is-dropdown-submenu-parent.opens-left > .is-dropdown-submenu {
  right: 100%;
  left: auto;
}

.is-dropdown-submenu-parent.opens-right > .is-dropdown-submenu {
  right: auto;
  left: 100%;
}

.is-dropdown-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  display: none;
  min-width: 200px;
  border: 1px solid #cacaca;
  background: #fefefe;
}

.dropdown .is-dropdown-submenu a {
  padding: 0.7rem 1rem;
}

.is-dropdown-submenu .is-dropdown-submenu-parent > a::after {
  right: 14px;
}

.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
  content: "";
  border-left-width: 0;
  border-color: transparent #1779ba transparent transparent;
  right: auto;
  left: 5px;
}

.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px;
  content: "";
  border-right-width: 0;
  border-color: transparent transparent transparent #1779ba;
}

.is-dropdown-submenu .is-dropdown-submenu {
  margin-top: -1px;
}

.is-dropdown-submenu > li {
  width: 100%;
}

.is-dropdown-submenu.js-dropdown-active {
  display: block;
}

.dropdown-pane {
  position: absolute;
  z-index: 10;
  display: none;
  width: 300px;
  padding: 1rem;
  visibility: hidden;
  border: 1px solid #cacaca;
  border-radius: 0;
  background-color: #fefefe;
  font-size: 1rem;
}

.dropdown-pane.is-opening {
  display: block;
}

.dropdown-pane.is-open {
  display: block;
  visibility: visible;
}

.dropdown-pane.tiny {
  width: 100px;
}

.dropdown-pane.small {
  width: 200px;
}

.dropdown-pane.large {
  width: 400px;
}

.dropdown-pane {
  padding: 0;
  background-color: #fff;
  border: 1px solid #eee;
}

.dropdown-pane ul {
  margin: 0;
  padding: 0;
}

.dropdown-pane li {
  padding: 1rem;
  color: var(--secondary);
}

.dropdown-pane li:hover {
  color: #fff;
  background-color: var(--secondary);
}

.dropdown-pane li:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.autoComplete_wrapper {
  width: 100%;
  position: relative;

  input {
    color: #000;
    width: 100%;
    margin: 0;
  }

  ul {
    position: absolute;
    margin: 0;

    li {
      color: var(--secondary);

      span {
        &.author__avatar {
          display: inline-block;
        }
      }

      &:hover,
      &[aria-selected="true"] {
        background-color: #ededed;
      }

      &.disabled {
        pointer-events: none;
        opacity: 0.6;
      }

      .is-group {
        float: right;
      }
    }
  }

  span {
    &.autocomplete__selected-item.sticky {
      position: absolute;
      overflow: hidden;
      height: 40px;
      padding: 1rem;
    }
  }

  .clear-sticky-selection {
    display: inline;
    position: absolute;
    font-size: 1.3rem;
    cursor: pointer;
    right: 1rem;
    height: 40px;
  }

  .clear-multi-selection {
    cursor: pointer;
  }

  .search-prompt {
    color: #000;
    border: 1px solid #6b7280cc;
    padding: 0.2rem;
  }
}

.multiselect {
  background-color: #fff;
  display: inline-block;
  border: 1px solid #6b7280cc;
  width: 100%;
  cursor: text;
  padding: 0 0.5rem;
  min-height: 2.4375rem;

  span {
    display: inline-block;
    position: relative;
    margin: 0.5rem 0.5rem 0.5rem 0;

    input {
      border: none;
      outline: none;
    }

    &.clear-multi-selection {
      margin: 0 0 0 0.2rem;
      cursor: pointer;
    }
  }
}