@use 'backend' as *;

#{c(forums container)} {
  background: hsl(from cv('shading.bg') h s l/calc(cv('shading.percent') * 0.3));
}

// HEADER
#{c(forums header)} {
  background: cv('shading.input.bg');
  border: 2px solid cv('shading.input.border');
  #{c(input input)} {
    background: none;
    box-shadow: none;
  }
}
#{c(forums headerWithMatchingPosts)} {
  border-bottom: none;
  border-color: cv('color.main');
}
#{c(forums matchingPostsRow)} {
  background: cv('shading.input.bg');
  border: 2px solid cv('shading.input.border');
  border-top: 1px solid var(--border-subtle);
}

// GUIDELINES
#{c(forums guidelines container)} {
  background: cv('shading.card');
  border: none;
}
#{c(forums guidelines descriptionContainer)},
#{c(forums guidelines gradient)},
#{c(forums guidelines showMoreLinkContainer)} {
  background: transparent;
}

// TAGS
#{c(pages tags pill)} {
  background: cv('shading.card');
  border-color: cv('color.main');
  transition: all 0.2s ease;
  &#{c(pages tags clickable)} {
    &:not(#{c(pages tags disabled)}) {
      &:hover {
        background: cv('shading.card');
        border-color: cv('color.hover');
      }
    }
  }
  &#{c(pages tags selected)} {
    background: cv('color.main');
    border-color: cv('color.main');
    color: var(--interactive-active);
    &:not(#{c(pages tags disabled)}) {
      &:hover {
        background: cv('color.hover');
        border-color: cv('color.hover');
      }
    }
  }
  #{c(forums tags dropdownPopoutContainer)} {
    background: transparent;
    border: none;
  }
}

// NEW POST
#{c(forums newPostsPopout)} {
  background: cv('shading.popout');
  border-color: transparent;
}

// CARD
:is(#{c(forums grid card)}, #{c(forums list card)}) {
  // might need theme-dark/light in the future
  background: cv('shading.card');
  border: 2px solid transparent;
  &:hover {
    background: cv('shading.card');
    border-color: cv('color.hover');
  }
  &:is(#{c(forums grid isOpen)}, #{c(forums list isOpen)}) {
    background: cv('shading.card');
    border-color: cv('color.main');
  }
}
#{c(forums grid contentPreview)} {
  background: cv('shading.card');
  border: none;
}
#{c(forums pinIcon)} {
  background: cv('color.main');
}

// CHAT
#{c(forums chat divider)} {
  background: transparent;
}
#{c(forums chat header iconWrapper)} {
  background: cv('color.main');
}
#{c(forums chat header icon)} {
  path {
    fill: var(--header-primary);
  }
}
#{c(forums chat bar container)} {
  background: transparent;
  border: none;
}
#{c(forums chat bar active)} {
  color: cv('color.main');
}

// EMPTY
#{c(forums empty)} {
  background: transparent;
}
#{c(forums emptyIcon)} {
  background: cv('color.main');
  color: var(--header-primary);
}
#{c(forums emptyCTA)} {
  color: cv('color.main');
  &:hover {
    color: cv('color.hover');
  }
}

// CARD LOADING
#{c(forums loading card)} {
  background: cv('shading.card');
  animation: cv-card-loading 1.5s infinite ease-in-out;
}
