/* Design System Overrides */
.ts-wrapper {
  /* Control */
  .ts-control {
    min-height: var(--op-input-height-large);
    align-items: center;
    border: none;
    border-radius: var(--op-radius-large);
    background-color: var(--op-color-neutral-plus-max);
    box-shadow: var(--op-border-all) var(--op-color-border);
    color: var(--op-color-neutral-on-plus-max);
    font-size: var(--op-font-x-small);
    font-weight: var(--op-font-weight-light);
    line-height: var(--op-line-height-base);
  }

  /* Active control */
  &.dropdown-active {
    .ts-control {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  /* Dropdown */
  .ts-dropdown {
    border: none;
    margin: 0;
    border-bottom-left-radius: var(--op-radius-large);
    border-bottom-right-radius: var(--op-radius-large);
    box-shadow: var(--op-border-all) var(--op-color-border);
    contain: paint;

    .option,
    .create {
      &.active {
        background-color: var(--op-color-primary-plus-seven);
        color: var(--op-color-primary-on-plus-seven);
      }
    }
  }

  /* Item */
  &.multi {
    .ts-control > div {
      padding: var(--op-space-3x-small) var(--op-space-x-small);
      border-radius: var(--op-radius-medium);
      margin: 0 var(--op-space-3x-small) var(--op-space-3x-small) 0;
      background-color: var(--op-color-primary-base);
      color: var(--op-color-primary-on-base);

      &.active {
        background-color: var(--op-color-primary-plus-two);
        color: var(--op-color-primary-on-plus-two);
      }
    }
  }

  /* Dropdown Arrow */
  &.single,
  &.multi,
  &.single.input-active,
  &.multi.input-active {
    .ts-control {
      /* Highly specific SVG data image for the dropdown arrow. */
      background-image: var(--op-encoded-images-dropdown-arrow);
      background-position-x: calc(100% - var(--op-space-small));
      background-position-y: center;
      background-repeat: no-repeat;
    }
  }
}