@use "sass:color";
@use "sass:list";

.page-category-info {
  flex-wrap: wrap;
}

.page-category-item {
  display: inline-block;

  margin: 0.125em 0.25em;
  padding: 0 0.25em;
  border-radius: 0.25em;

  background: var(--vp-c-grey-soft);
  color: var(--vp-c-text-mute);

  font-weight: bold;
  font-size: 0.75rem;
  line-height: 2;

  transition:
    background var(--vp-t-color),
    color var(--vp-t-color);

  @media print {
    padding: 0;
    font-weight: normal;

    &::after {
      content: ", ";
    }

    &:last-of-type::after {
      content: "";
    }
  }

  &.clickable {
    cursor: pointer;

    &:not([class*="color"]):hover {
      color: var(--vp-c-accent-hover);
    }
  }

  @each $color in hope-config.$colors {
    $index: list.index(hope-config.$colors, $color) - 1;

    &.color#{$index} {
      background: color.scale($color, $lightness: 90%);
      color: color.scale($color, $lightness: 20%);

      [data-theme="dark"] & {
        background: color.scale($color, $lightness: -75%);
        color: color.scale($color, $lightness: -10%);
      }

      &.clickable:hover {
        background: color.scale($color, $lightness: 75%);

        [data-theme="dark"] & {
          background: color.scale($color, $lightness: -60%);
        }
      }
    }
  }
}