18F/culper

.multiple-dropdown {
  &.has-tokens {
    input {
      background: none !important;
      border: 1px solid $color-gray !important;
    }
  }

  .tokens {
    display: block;
    width: 100%;
    padding: 1rem 0 0;

    // These are the badge/token/thingies showing the selected values
    .token {
      display: inline-block;
      width: initial;
      border: 3px solid $color-green-light;
      border-radius: 3px;
      margin-top: 1rem;
      margin-bottom: 0.1rem;
      padding: 1rem;
      cursor: default;

      .token-delete {
        cursor: pointer;
        margin-left: 1rem;

        &:focus,
        &:hover {
          outline: none;
          color: $color-red-dark;
        }
      }

      // Only apply the margin left to items after the first
      &:nth-of-type(n + 1) {
        margin-right: 1rem;
      }
    }
  }
}