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

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

.page-tag-item {
  position: relative;

  display: inline-block;
  vertical-align: middle;

  overflow: hidden;

  min-width: 1.5rem;
  margin: 0.125rem;
  padding: 0.125rem 0.25rem 0.125rem 0.625rem;

  background: var(--vp-c-grey-soft);
  background:
    linear-gradient(135deg, transparent 0.75em, var(--vp-c-grey-soft) 0) top,
    linear-gradient(45deg, transparent 0.75em, var(--vp-c-grey-soft) 0) bottom;
  background-size: 100% 52% !important;
  background-repeat: no-repeat !important;
  color: var(--vp-c-text-mute);

  font-weight: bold;
  font-size: 0.625rem;
  line-height: 1.5;
  text-align: center;

  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);
    }
  }

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

    &.color#{$index} {
      background: color.scale($color, $lightness: 90%);
      background:
        linear-gradient(
            135deg,
            transparent 0.75em,
            color.scale($color, $lightness: 90%) 0
          )
          top,
        linear-gradient(
            45deg,
            transparent 0.75em,
            color.scale($color, $lightness: 90%) 0
          )
          bottom;
      color: color.scale($color, $lightness: 20%);

      [data-theme="dark"] & {
        background: color.scale($color, $lightness: -75%);
        background:
          linear-gradient(
              135deg,
              transparent 0.75em,
              color.scale($color, $lightness: -75%) 0
            )
            top,
          linear-gradient(
              45deg,
              transparent 0.75em,
              color.scale($color, $lightness: -75%) 0
            )
            bottom;
        color: color.scale($color, $lightness: -10%);
      }

      &.clickable:hover {
        background: color.scale($color, $lightness: 75%);
        background:
          linear-gradient(
              135deg,
              transparent 0.75em,
              color.scale($color, $lightness: 75%) 0
            )
            top,
          linear-gradient(
              45deg,
              transparent 0.75em,
              color.scale($color, $lightness: 75%) 0
            )
            bottom;

        [data-theme="dark"] & {
          background: color.scale($color, $lightness: -60%);
          background:
            linear-gradient(
                135deg,
                transparent 0.75em,
                color.scale($color, $lightness: -60%) 0
              )
              top,
            linear-gradient(
                45deg,
                transparent 0.75em,
                color.scale($color, $lightness: -60%) 0
              )
              bottom;
        }
      }
    }
  }
}