@import '../../variables';

/* Selected Tags */
.vs__selected, .badge.vs__selected {
  display: flex;
  align-items: center;
  background-color: $vs-selected-bg;
  line-height: $vs-component-line-height;
  margin: 2px 2px 2px 0;
  padding-right: .25rem;
  z-index: 0;
}
.vs--multiple .vs__selected {
  padding-left: .75rem;
  font-weight: normal;
  font-size: 1rem;
  color: #222;
  background-color: #ccc;

  &.badge {
    padding: 0.075rem 0.1rem 0.075rem  0.5rem;
    border-radius: .325rem !important;
    font-size: 0.875rem;
    font-family: var(--bs-font-sans-serif);
    padding-right: .1rem;
  }
}
[data-theme="dark"] {
  .vs--multiple .vs__selected {
    background-color: #221;
    color: $dark-body-color;
  }
}

.vs__deselect {
  display: inline-flex;
  appearance: none;
  margin-left: 4px;
  padding: 0 !important;
  border: 0;
  cursor: pointer;
  background: none;

  .vs__selected & {
    padding: 0;
  }
}

/* States */

.vs--single {
  .vs__selected {
    background-color: transparent;
    border-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vs__search {
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    right: 0;
    left: 0;
    width: 100% !important;
    padding-left: 0 !important;
  }
  &.vs--open .vs__selected,
  &.vs--loading .vs__selected {
    //position: absolute;
    opacity: .4;
  }
  &.vs--searching .vs__selected {
    display: none;
  }
}
