.components-form-token-field__input-container {
//@include input-control();
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  margin: 0 0 8px 0;
  padding: 2px 4px;
  cursor: text;
  box-sizing: border-box;

  &:focus {
    border-color: var(--wp-admin-theme-color);
    box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
    outline: 2px solid transparent;
  }

  &.is-disabled {
    background: #ddd;
    border-color: #ddd;
  }

  &.is-active {
  //@include input-style__focus();
  }

  // Token input
  input[type="text"].components-form-token-field__input {
    display: inline-block;
    flex: 1;
    font-size: 16px;
    width: 100%;
    max-width: 100%;
    margin-left: 4px;
    padding: 0;
    min-height: 24px;
    min-width: 50px;
    background: inherit;
    border: 0;
    color: #1e1e1e;
    box-shadow: none;

    // Resolves Zooming on iOS devices
    // https://github.com/WordPress/gutenberg/issues/27405
  //@include break-small() {
  //  font-size: 13px;
  //}

    &:focus,
    .components-form-token-field.is-active & {
      outline: none;
      box-shadow: none;
    }
  }
  .components-form-token-field__token + input[type="text"].components-form-token-field__input {
    width: auto;
  }

  input[type=text].components-form-token-field__input {
    font-size: 13px;
  }
}

.components-form-token-field__label {
  display: inline-block;
  margin-bottom: 4px;
}

.components-form-token-field__help {
  font-size: 12px;
  font-style: normal;
  color: #757575;
}

// Tokens
.components-form-token-field__token {
  font-size: 13px;
  display: flex;
  margin: 2px 4px 2px 0;
  color: #1e1e1e;
  max-width: 100%;

  &.is-success {
    .components-form-token-field__token-text,
    .components-form-token-field__remove-token {
      background: #4ab866;
    }
  }

  &.is-error {
    .components-form-token-field__token-text,
    .components-form-token-field__remove-token {
      background: #cc1818;
    }
  }

  &.is-validating {
    .components-form-token-field__token-text,
    .components-form-token-field__remove-token {
      color: #757575;
    }
  }

  &.is-borderless {
    position: relative;
    padding: 0 16px 0 0;

    .components-form-token-field__token-text {
      background: transparent;
      color: var(--wp-admin-theme-color);
    }

    .components-form-token-field__remove-token {
      background: transparent;
      color: #757575;
      position: absolute;
      top: 1px;
      right: 0;
    }

    &.is-success {
      .components-form-token-field__token-text {
        color: #4ab866;
      }
    }

    &.is-error {
      .components-form-token-field__token-text {
        color: #cc1818;
        border-radius: 4px 0 0 4px;
        padding: 0 4px 0 6px;
      }
    }

    &.is-validating {
      .components-form-token-field__token-text {
        color: #1e1e1e;
      }
    }
  }

  &.is-disabled {
    .components-form-token-field__remove-token {
      cursor: default;
    }
  }
}

.components-form-token-field__token-text,
.components-form-token-field__remove-token.components-button {
  display: inline-block;
  line-height: 24px;
  height: auto;
  background: #ddd;
  min-width: unset;
  transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
@include reduce-motion;
}

.components-form-token-field__token-text {
  border-radius: 2px 0 0 2px;
  padding: 0 0 0 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.components-form-token-field__remove-token.components-button {
  cursor: pointer;
  border-radius: 0 2px 2px 0;
  padding: 0 2px;
  color: #1e1e1e;
  line-height: 10px;
  overflow: initial;

  &:hover {
    color: #1e1e1e;
  }
}

// Suggestion list
.components-form-token-field__suggestions-list {
  flex: 1 0 100%;
  min-width: 100%;
  max-height: 9em;
  overflow-y: auto;
  transition: all 0.15s ease-in-out;
//@include reduce-motion("transition");
  list-style: none;
  border-top: 1px solid #757575;
  margin: 4px -4px -4px;
  padding: 0;
}

.components-form-token-field__suggestion {
  color: #757575;
  display: block;
  font-size: 13px;
  padding: 4px 8px;
  margin: 0;
  cursor: pointer;

  &.is-selected {
    background: var(--wp-admin-theme-color);
    color: #fff;
  }
}

.components-form-token-field__suggestion-match {
  text-decoration: underline;
}