.target-chip-selector {
  padding: $pad-small;
  background-color: $core-fleet-white;
  border: none;
  box-shadow: inset 0 0 0 1px $ui-fleet-black-25;
  border-radius: $border-radius-medium;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: $pad-small;

  &:not(:last-of-type) {
    margin-right: $pad-small;
  }
  img {
    max-width: 12px;
  }
  .plus-icon {
    padding-right: 3px;
  }
  .selector-name {
    margin-left: 8px;
    font-size: $x-small;
    flex: 1;
  }
  .selector-count {
    margin-left: 8px;
    font-size: $xxx-small;
    font-weight: $bold;
  }
  &[data-selected="true"] {
    background-color: $ui-off-white;
    box-shadow: inset 0 0 0 1px $ui-fleet-black-75;
  }

  &:hover {
    background-color: $ui-off-white;
    box-shadow: inset 0 0 0 1px $core-fleet-black;
    color: $core-fleet-black;
  }

  &:active {
    background-color: $ui-off-white;
    box-shadow: inset 0 0 0 1px $core-fleet-black;
    color: $core-fleet-black;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    &:hover {
      background-color: $core-fleet-white;
      box-shadow: inset 0 0 0 1px $ui-fleet-black-25;
      color: inherit;
    }
  }

  // When tabbing
  &:focus-visible {
    outline: 1px solid $core-focused-outline;
    outline-offset: 1px;
    border-radius: $border-radius;
  }
}