multi-combo {
  .multi-combo-root-button {
    color: $darkest-grey;
    box-shadow: none;
    border: solid 1px $solid-grey;
    transition: all 0.5s ease;
    border-radius: 0;
    text-transform: inherit !important;

    &:not([disabled]) {
      background-color: $white;
    }

    &::after {
      content: "▼";
    }

    &:hover {
      border-color: $primary-dark;
    }

    &.opened {
      &::after {
        @include transform(rotate(180deg));
      }
    }
  }
}

.multi-combo-root-panel {
  background: $white;
  box-shadow: 0px 0px 4px 0px $shadow;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  padding: 0 10px;
  margin-left: 2px;

  > ul {
    > li {
      transition: background-color 0.25s, color 0.25s;
      margin-bottom: 5px;
      padding: 0px 10px;
      border-radius: 2px;

      &.selected {
        color: $primary-dark;
        font-weight: bold;

        &::before {
          width: 15px;
          height: 15px;
          color: $white;
          border-radius: 2px;
          background-color: $primary-dark;
          content: "✓";
          padding: 2px 5px;
          font-size: 10px;
          margin-right: 5px;
        }
      }

      &:not(.selected) {
        &:not([disabled]) {
          &:hover {
            color: white;
            background-color: $accent;
          }
        }

        &[disabled] {
          background-color: $light-grey;
        }
      }
    }
  }
}

div {
  .multi-combo-panel-opts {
    //border-bottom: 1px solid $lightest-grey;

    > h4 {
      padding: 5px 10px;
      display: none;
    }

    > button {
      padding: 8px 14px 10px;

      &.multi-combo-select-all {
        background-image: url(/public/img/glyphicons-halflings-white.png);
        background-position: 15% 67%;
        background-repeat: no-repeat;
      }

      &.multi-combo-deselect-all {
        background-image: url(/public/img/glyphicons-halflings-white.png);
        background-position: 9.5% 67%;
        background-repeat: no-repeat;
      }
    }
  }

  .multi-combo-search-bar {
    margin: 10px 0;
    border-bottom: 1px solid $light-grey;

    > input {
      transition: border 0.25s ease-in-out;
    }

    > i.multi-icon-search-cancel {
      background-image: url(/public/img/glyphicons_197_remove.png);
      background-repeat: no-repeat;
      background-size: cover;
      top: 8px;
      right: 5px;
      opacity: 0.5;
    }
  }
}