@use 'sass:list';
@use 'sass:color';
@use 'mixins';
@import 'vars';
@import '_variables';

@mixin tag_wrapper {
  // padding-bottom: 0 !important;

  font-size: 14px;

  .category {
    display: inline-block;
    vertical-align: middle;
    margin: 0.3rem 0.6rem;
    padding: 0.5rem 1rem;
    border-radius: 0.4rem;
    border: 0.15rem solid var(--c-theme);
    cursor: pointer;
    transition:
      all 0.3s,
      color 0.3s;

    position: relative;
    @media (max-width: $MQMobileNarrow) {
      font-size: 0.9rem;
    }

    .category-num {
      display: inline-block;
      min-width: 1rem;
      height: 1.2rem;
      padding: 0 0.1rem;
      border-radius: 1rem;

      font-size: 0.7rem;
      line-height: 1.2rem;
      text-align: center;
      color: #fff;

      position: absolute;
      top: -0.6rem;
      right: -0.6rem;
      background-color: var(--c-theme);
      filter: saturate(70%);
    }

    &:hover {
      background-color: var(--c-theme);
      color: var(--c-bg);
    }

    &.router-link-active {
      background: var(--c-theme);
      color: var(--c-bg);
    }
  }

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

    .tag-#{$index} {
      display: inline-block;
      vertical-align: middle;
      margin: 0.4rem 0.6rem;
      padding: 0.5rem 1rem;
      border-radius: 0.4rem;
      background-color: color.scale($color, $lightness: 85%);
      cursor: pointer;
      transition:
        all 0.3s,
        color 0.3s;
      position: relative;
      color: $color;
      box-shadow: 0 3px 1px 3px var(--card-shadow-color);

      .dark & {
        background-color: color.scale($color, $lightness: -70%);
      }

      @media (max-width: $MQMobileNarrow) {
        font-size: 0.9rem;
      }

      .tag-num {
        display: inline-block;
        min-width: 1rem;
        height: 1.2rem;
        padding: 0 0.1rem;
        border-radius: 1rem;

        font-size: 0.7rem;
        line-height: 1.2rem;
        text-align: center;
        color: #fff;

        position: absolute;
        top: -0.6rem;
        right: -0.6rem;
        background-color: darken($color, 10%);

        .dark & {
          background-color: darken($color, 35%);
        }
      }

      &:hover {
        // padding: 0.4rem 0.9rem;
        background-color: $color;
        color: darken($color, 40%);
        box-shadow: 0 2px 1px 2px var(--card-shadow-color);

        .tag-num {
          background-color: darken($color, 30%);
        }
        .dark & {
          background-color: color.scale($color, $lightness: -40%);
        }
      }

      &.router-link-active {
        padding: 0.7rem 1.2rem;
        background-color: $color;
        color: darken($color, 40%);
        box-shadow: 0 2px 1px 2px var(--card-shadow-color);

        .tag-num {
          background-color: darken($color, 30%);
        }
        .dark & {
          color: color.scale($color, $lightness: 20%);
          background-color: color.scale($color, $lightness: -40%);
        }
      }
    }
  }
}

.tag-wrapper {
  @include mixins.content_wrapper;
  @include tag_wrapper;
  padding: 1rem 0rem !important;
  @media (max-width: $MQMobileNarrow) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
}

.category-wrapper {
  padding: 1rem 0rem !important;
  @include mixins.content_wrapper;
  @include tag_wrapper;
}

.tag-article-list {
  display: flex;
  justify-content: center;
}