@teamsparta/chat-ui/src/lib/component/PresetQuestions.style.js

simple chat-ui

import styled from "@emotion/styled";
import { additional, neutralDay } from "@teamsparta/design-system";

export const Container = styled.div`
  background-color: ${({ theme }) =>
    theme === "dark" ? neutralDay.gray100 : neutralDay.gray0};
  width: 100%;
  padding: 16px;
  display: flex;
  overflow-x: scroll;
  white-space: nowrap;
  gap: 12px;
  box-sizing: border-box;
  min-height: 74px;
  // 스크롤바 숨기기
  &::-webkit-scrollbar {
    display: none; // Webkit 브라우저용(예: Chrome, Safari)
  }

  -ms-overflow-style: none; // IE, Edge 브라우저용
  scrollbar-width: none; // Firefox 브라우저용
`;
export const BorderDiv = styled.div`
  background-color: ${({ theme }) =>
    theme === "dark" ? neutralDay.gray95 : neutralDay.gray5};
  border: 1px solid transparent;
  border-radius: 100px;
  border: 1px solid
    ${({ theme }) => (theme === "dark" ? neutralDay.gray90 : neutralDay.gray20)};
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  min-width: fit-content;
`;

export const GradationBorderDiv = styled.div`
  background-color: ${({ theme }) =>
    theme === "dark" ? `rgba(128, 194, 255, 0.20)` : neutralDay.gray5};
  border: 1px solid
    ${({ theme }) => (theme === "dark" ? additional.blue50 : `transparent`)};
  border-radius: 100px; /* 테두리 둥글기 */
  background-image: ${({ theme }) =>
    theme === "dark"
      ? ``
      : `linear-gradient(${neutralDay.gray5}, ${neutralDay.gray5}),
    linear-gradient(to right, #146aff 0%, #189fec 100%)`};
  background-origin: border-box;
  background-clip: content-box, border-box;
  display: flex;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  min-width: fit-content;
`;
export const EmojiSpan = styled.span`
  padding: 0 5px; // 필요에 따라 조정
  -webkit-background-clip: unset;
`;

export const Span = styled.span`
  color: ${({ theme }) =>
    theme === "dark" ? neutralDay.gray5 : neutralDay.gray80};
  padding: 10px 20px;
`;

export const GradationSpan = styled.span`
  background-image: ${({ theme }) =>
    theme === "dark" ? `linear-gradient(90deg, #14ffff 0%, #3cb6fb 100%)` : ``};
  background-clip: text;
  -webkit-background-clip: text;
  color: ${({ theme }) =>
    theme === "dark" ? "transparent" : neutralDay.gray80};
`;