.gl-token {
  @include gl-text-gray-900;
  @include gl-bg-gray-100;
  @include gl-rounded-small;
  @include gl-pl-3;
  @include gl-display-inline-flex;
  @include gl-flex-direction-column;
  @include gl-justify-content-center;

  &.gl-token-view-only {
    @include gl-py-2;
    @include gl-pr-3;
  }
}

.gl-token-search-type-variant {
  @include gl-bg-gray-100;
  @include gl-rounded-top-right-none;
  @include gl-rounded-bottom-right-none;
}

.gl-token-search-value-variant {
  @include gl-rounded-top-left-none;
  @include gl-rounded-bottom-left-none;
}

.gl-token-content {
  @include gl-font-sm;
  @include gl-line-height-normal;
  @include gl-display-flex;
  @include gl-align-items-center;
  @include gl-reset-color;

  > .gl-avatar:first-child,
  > .gl-spinner-container:first-child {
    @include gl-mr-2;
  }
}

.gl-token-close {
  @include gl-ml-2;
  @include gl-reset-color;
  @include gl-cursor-pointer;
  opacity: 0.8;
  color: inherit !important;
  background-color: transparent !important;

  svg {
    color: inherit !important;
    mix-blend-mode: normal !important;
  }

  &:hover,
  &:focus {
    @include gl-opacity-10;
  }

  &:focus,
  &:hover:focus {
    @include gl-focus($important: true);
  }
}