/* Mod icons: the title icon at the top of a mod page, and the icon in front of each home page card title. */
.md-typeset img.mod-icon {
  float: right;
  width: 96px;
  height: 96px;
  margin: 0 0 1em 1em;
  object-fit: contain;
}

.md-typeset img.card-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 0.4em;
}

@media screen and (max-width: 44.9375em) {
  .md-typeset img.mod-icon {
    width: 64px;
    height: 64px;
  }
}

/* A malus in an ability's stats, red as in the game's tooltip. */
.md-typeset .stat-malus {
  color: #e53935;
}

/* An ability's own icon, in front of its kind line on a fruit page. */
.md-typeset img.ability-icon {
  width: 48px;
  height: 48px;
  vertical-align: middle;
  margin-right: 0.5em;
}

/* A fruit's own sprite in front of its name, in a fruit list. */
.md-typeset img.fruit-icon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 0.4em;
}

/* Keep a fruit's sprite and name, and a box icon and its name, on one line. */
.md-typeset td:has(> img.fruit-icon),
.md-typeset td:has(> img.box-icon) {
  white-space: nowrap;
}

/* A Devil Fruit box icon (Mine Mine no Mi's texture, credited on the page) beside the box name. */
.md-typeset img.box-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 0.2em;
}

/* A status effect's own icon in front of its name. */
.md-typeset img.effect-icon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 0.4em;
}

.md-typeset td:has(> img.effect-icon) {
  white-space: nowrap;
}

/* Vanilla-size (18x18) pixel-art icons, drawn at an exact multiple without smoothing. */
.md-typeset img.pixel-art {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

/* A small effect icon beside an effect's name in an ability's "Applies" line. */
.md-typeset img.effect-mini {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
  margin-right: 0.15em;
}

/* Pixel art drawn without smoothing. */
.md-typeset img.pixelated {
  image-rendering: pixelated;
}

/* Sortable tables (assets/javascripts/sortable.js): a clickable header shows the direction it sorts. */
.md-typeset .sortable-header {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.md-typeset .sortable-header[data-sort="asc"]::after { content: " \25B2"; }
.md-typeset .sortable-header[data-sort="desc"]::after { content: " \25BC"; }

/* The box that filters a table. */
.md-typeset input.table-filter {
  width: 100%;
  max-width: 28rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-size: 0.8rem;
}

/* An ability's icon in front of its name, in a table row. */
.md-typeset img.ability-mini {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 0.3em;
}
.md-typeset .sortable-table td:first-child {
  white-space: nowrap;
}