@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(--bg-color-secondary);
  color: var(--text-color-light);

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

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

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

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

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

  &.clickable {
    > span:hover {
      color: var(--theme-color);
      cursor: pointer;
    }
  }

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

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

      #{hope-config.$dark-selector} & {
        background: color.scale($color, $lightness: -75%);
        color: color.scale($color, $lightness: -10%);
      }

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

        #{hope-config.$dark-selector} & {
          background: color.scale($color, $lightness: -60%);
        }
      }
    }
  }
}