.tag-list {
  &-row {
    margin: 0.5rem 0;
  }

  &-button {
    margin: 0 0.5rem;
    width: 8rem;
  }

  &-anchor {
    color: $text-color;
  }

  &-count {
    display: inline-block;
    margin: 0 0.5rem;
    min-width: 6rem;
  }
}

.tag-card {
  padding: 0.5rem;

  @media (max-width: 576px) {
    width: 100%;
  }

  &-image {
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }

  button.btn.favorite-button {
    opacity: 1;
    padding: 0;
    position: absolute;
    right: 5px;
    top: 10px;
    transition: opacity 0.5s;

    svg.fa-icon {
      margin-left: 0.4rem;
      margin-right: 0.4rem;
    }

    &.not-favorite {
      color: rgba(191, 204, 214, 0.5);
      filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
      opacity: 0;
    }

    &.favorite {
      color: #ff7373;
      filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9));
    }

    &:hover,
    &:active,
    &:focus,
    &:active:focus {
      background: none;
      box-shadow: none;
    }
  }

  &:hover button.btn.favorite-button.not-favorite {
    opacity: 1;
  }
}

#tag-page {
  .tag-head {
    .name-icons {
      .not-favorite {
        color: rgba(191, 204, 214, 0.5);
      }

      .favorite {
        color: #ff7373;
      }
    }
  }
}

.tag-details {
  .logo {
    max-height: 50vh;
    max-width: 100%;
  }

  .logo-container {
    margin-bottom: 4rem;
  }
}

#tag-merge-menu .dropdown-item {
  align-items: center;
}

.tag-card {
  .tag-description + div {
    margin-top: 1rem;
  }
}

.tag-popover-card-placeholder {
  display: flex;
  max-width: 240px;
  min-height: 314px;
  width: calc(100vw - 2rem);
}

.tag-popover-card {
  padding: 0.5rem;
  text-align: left;

  .card {
    background: transparent;
    box-shadow: none;
    max-width: calc(100vw - 2rem);
    padding: 0;
    width: 240px;
  }
}

.tag-item {
  .icon-wrapper {
    color: #202b33;
    opacity: 0.5;
    padding-left: 6px;
  }
}

.tag-item {
  .tag-icon {
    color: #202b33;
    margin: 0;
    opacity: 0.5;
    padding-left: 3px;
    transform: scale(0.7);
  }
}

.tag-select {
  .alias {
    font-weight: bold;
    white-space: pre;
  }
}

.tag-select-image {
  height: 25px;
  margin-right: 0.5em;
  width: 25px;
}
