import { styleScrollbar } from "@/styles"
import styled, { css } from "styled-components"

export const ScrollWrapper = styled.div`
  ${({ theme }) => css`
    ${styleScrollbar(theme)};

    width: 100%;
    height: 39.2rem;
    overflow-y: auto;
    padding: 2rem 0 2rem 0;
  `}
`

// code block
export const CodeBlockContainer = styled.div`
  position: relative;
  margin-bottom: 1.5rem;
`

export const CodeBlockPre = styled.pre`
  ${({ theme }) => css`
    padding: 1rem;
    border-radius: 0.8rem;
    border: 1px solid ${theme.colors.gray700};
    color: ${theme.colors.gray200}
    background-color: black;  
    font-family: "Courier New", Courier, monospace;
    font-size: 0.875rem;
    overflow-x: auto;
    display: flex;
    align-items: flex-start;
    width: 100%

    & > code.hljs {
      padding: 0;
      background-color: transparent;
    }
  `}
`
// unordered list

export const UlList = styled.ul`
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: #065f46;
  margin: 1.5rem 0;
  padding-left: 0.75rem;

  & ol {
    margin: 0.75rem 0;
  }

  & ul {
    margin: 0.75rem 0;
  }
`

export const UlListItem = styled.li`
  display: flex;
  gap: 0.5rem;
  align-items: center;
`

export const UlDot = styled.div`
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
  display: block;
  flex-shrink: 0;
  margin-top: 0.2rem;
`