@use 'backend' as *;

// CHAT INPUT
#{c(chatForm form)} {
  margin-top: 4px;
}
#{c(chatForm channelTextArea)} {
  background-color: cv('shading.input.bg');
  box-shadow: 0 0 0 2px cv('shading.input.border');
  border-color: transparent;
  &:focus-within {
    border-color: transparent;
    box-shadow: 0 0 2px 2px var(--hsl-main-color);
  }
}
#{c(chatForm stackedBars)},
#{c(chatForm attachmentArea)} {
  background: transparent;
}
#{c(chatForm upload)} {
  background: cv('shading.card');
  border: none;
}

#{c(chatForm threadSuggestionBar)},
#{c(chatForm themedBackground)} {
  background: transparent;
}

// SCROLLBAR
#{c(chatForm scrollableContainer)} {
  &::-webkit-scrollbar-thumb {
    background-color: cv('color.main');
  }
}

// INLINE CODE
#{c(chatForm inlineCode)},
#{c(chatForm afterInlineCode)},
#{c(chatForm beforeInlineCode)} {
  background: hsl(from cv('shading.card') h s calc(100 - l) / calc(alpha * 0.5));
}


// SEND BUTTON
#{c(chatForm sendButtonActiveChild)} {
  color: var(--interactive-normal);
}
:is(#{c(main themeLight)}, #{c(main themeDark)}) {
  #{c(chatForm sendButton)} {
    &:is(:focus, :focus-within, :hover) {
      #{c(chatForm sendButtonActiveChild)} {
        color: var(--interactive-active);
      }
    }
  }
}

// TOOLBAR
#{c(chatForm toolbar)} {
  background-color: cv('shading.popout');
  box-shadow: none;
  &::before {
    border-top-color: cv('shading.popout');
  }
}
