.tag-card {
  background-color: var(--bs-card-color, #2c2c2c);
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 0.125rem 0.3125rem rgba(0,0,0,0.2);
  transition: transform 0.2s ease, background 0.3s ease;
  cursor: pointer;

  &.not-selectable:hover {
    cursor: not-allowed;
    background-color: var(--bs-card-color, #2c2c2c) !important;
  }
}

.tag-card:hover {
  background-color: var(--card-hover-bg-color);
  //transform: translateY(-3px); // Cool effect but has a weird background issue. ROBBIE: Fix this
  & .tag-name, & .tag-meta {
    color: var(--card-hover-text-color)
  }
}

.tag-name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  max-height: 8rem;
  height: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tag-meta {
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  color: var(--text-muted-color, #bbb);
}
