/* Tagsinput */
.tagsinput {
  display: flex;
  flex-flow: wrap;
  place-content: flex-start;
  gap: var(--padding-small);
  background: var(--background-color);
  border: 1px solid var(--meta-border-color);
  height: 10.6em;
  overflow: auto;
  padding: 5px;
  resize: both;
}

.tagsinput.js-taginput {
  height: auto;
  min-height: 7.33em;
  max-height: 50vh;
  padding-bottom: 0;
  margin-bottom: 4px;
}

.tagsinput.js-taginput .input {
  padding: 5px;
  margin-bottom: 5px;
  height: fit-content;
}

/* Autocomplete */
.autocomplete {
  cursor: pointer;
  display: inline-block;
  margin: 0;
  padding: 0;
  position: absolute;
  user-select: none;
  white-space: nowrap;
  z-index: 999;

  /*
    'Courier New', which is the most widespread default monospace font is
    less readable with the default font weight. So we make it bold.
    Uncomment 'Courier New' below to test it.
  */
  font-weight: bold;
  font-family: /* "Courier New" */ "Consolas", "DejaVu Sans Mono", "Droid Sans Mono", "Noto Sans Mono", monospace;
  background: var(--autocomplete-background);

  /* Borders */
  border-style: solid;
  border-width: 1px;
  border-top-width: 0;
  border-color: var(--meta-border-color);

  /* Poor man's hack to make sure autocomplete doesn't grow beyond the viewport */
  max-width: 70vw;
}

.autocomplete__separator {
  margin: 0;
}

.autocomplete__item {
  padding: 5px;
}

.autocomplete__item__content {
  /* Squash overly long suggestions */
  text-overflow: ellipsis;
  overflow: hidden;
}

.autocomplete__item__tag {
  color: var(--autocomplete-tag-color);
  display: flex;
  justify-content: space-between;
  white-space: pre;
}

.autocomplete__item__history {
  color: var(--autocomplete-history-color);
}

.autocomplete__item__history__icon {
  /*
    Makes the history icon aligned in width with the autocomplete__item__tag's icon.
    Yes, it's a dirty hack, don't look at me like that >_<, but turns out font-awesome
    icons aren't actually all of the same size!
  */
  font-size: 11.38px;
}

.autocomplete__item__history__match {
  color: var(--autocomplete-history-match-color);
}

.autocomplete__item__tag__match {
  color: var(--autocomplete-tag-match-color);
}

.autocomplete__item__tag__count {
  color: var(--autocomplete-tag-count-color);

  /*
    Reduce the space size between groups of 3 digits in big numbers like "1 000 000".
    This way the number is more compact and easier to read.
  */
  word-spacing: -3px;
}

.autocomplete__item:hover:not(.autocomplete__item--selected) {
  background: var(--autocomplete-hover-background);
}

.autocomplete__item--selected,
.autocomplete__item--selected .autocomplete__item__history__match,
.autocomplete__item--selected .autocomplete__item__tag__match {
  background: var(--autocomplete-selected-background);
}

/* Tags */
.tag {
  --tag-background: var(--tag-normal-background);
  --tag-border: var(--tag-normal-border);
  --tag-color: var(--tag-normal-color);
  border: 1px solid;
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 5px;
  line-height: calc(1em + 10px);
  padding-left: 5px;
  width: fit-content;
  height: fit-content;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  background: var(--tag-background);
  border-color: var(--tag-border);
  color: var(--tag-color);
}

.tag .fa {
  font-size: 12px;
}

.tag__dropdown-icon {
  /* The width was chosen to cover the widest icon. This makes sure icons are
  visually aligned with each other */
  width: 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* For use on static pages */
.tag--no-counter {
  grid-template-columns: auto;
  padding: 0 5px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padding-small);
}

.tag a {
  color: inherit;
}

.tag__count {
  background-color: var(--tag-border);
  color: var(--foreground-color);
  font-weight: normal;
  padding: 0 5px;
  height: 100%;
  align-content: center;
}

.tag__dropdown__link {
  background-color: var(--meta-color);
  padding: 5px;
}

.tag__dropdown__link:hover {
  background-color: var(--tag-dropdown-hover-background);
}

@define-mixin tag-category $cat {
  .tag[data-tag-category="$(cat)"] {
    --tag-background: var(--tag-category-$(cat)-background);
    --tag-border: var(--tag-category-$(cat)-border);
    --tag-color: var(--tag-category-$(cat)-color);
  }
}

@mixin tag-category rating;
@mixin tag-category spoiler;
@mixin tag-category origin;
@mixin tag-category oc;
@mixin tag-category error;
@mixin tag-category character;
@mixin tag-category content-official;
@mixin tag-category content-fanmade;
@mixin tag-category species;
@mixin tag-category body-type;

.tag-page .tag,
.tagsinput .tag {
  font-family: var(--font-family-base);
  padding-right: 5px;
}

.tagsinput .tag a {
  margin-left: 5px;
}

.tag--spoilered,
.tag--hidden {
  opacity: 0.6;
}

/* Dropdowns don't work with opacity less than 1 */
.tag--spoilered:hover,
.tag--hidden:hover {
  opacity: 1;
}

/* Quick Tag Table */
.quick-tag-table__tab > div {
  display: inline-block;
  padding: 0 6px;
  vertical-align: top;
  border-right: var(--border);
  border-left: var(--border);
}

.quick-tag-table__tab > div:last-child {
  border-right: none;
}

span.quick-tag-table__tab-separator {
  background: var(--background-color);
  border: var(--border);
  border-bottom: 0;
  display: inline-block;
}

.tag-image--constrained {
  width: 50px;
  height: 50px;
}

.tag-info__category {
  margin-left: 20px;
}

.tag-info__heading {
  margin: 8px 0;
}

.tag-info__list {
  margin: 0;
  padding-left: 30px;
}
