import { FlexContainer } from "@/components/shared/components"
import styled, { css } from "styled-components"

export const StyledTransactionHistory = styled(FlexContainer)`
  ${({ theme }) => css`
    width: 100%;
    gap: 0.2rem;

    ::-webkit-scrollbar {
      width: 0.5rem;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      background: ${theme.colors.black};
      margin: 0.5rem;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: ${theme.colors.gray600};
      border-radius: 1rem;
      height: 5rem;
      background-clip: padding-box;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

    overflow: auto;
    max-height: 39.8rem;
    padding: 0.2rem;
    flex-direction: column;

    & > :first-child {
      border-radius: 0.4rem 0.4rem 0 0 !important;
    }

    & > :last-child {
      border-radius: 0 0 0.4rem 0.4rem !important;
    }

    & > :only-child {
      border-radius: 0.4rem !important;
    }
  `}
`