import styled from "styled-components";

const Wrapper = styled.div`
  display: flex;
  position: relative;
  flex-direction: column;
  background-color: ${(p) => p.theme.color.uiBackground03};
  border-radius: ${(p) => p.theme.radii.m};
  padding: ${(p) => `0 ${p.theme.spacing.xs} ${p.theme.spacing.xs} ${p.theme.spacing.xs}`};
  margin-bottom: ${(p) => p.theme.spacing.m};
`;

const Header = styled.div`
  position: sticky;
  background-color: ${(p) => p.theme.color.uiBackground03};
  top: 34px;
  display: flex;
  color: ${(p) => p.theme.colors.textHighEmphasis};
  align-items: center;
  padding: ${(p) => `${p.theme.spacing.xs} 0`};
  z-index: 1;
`;

const DateWrapper = styled.div`
  ${(p) => p.theme.textStyle.uiM};
`;

const CounterWrapper = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  margin-left: auto;
`;

const ItemList = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${(p) => p.theme.spacing.xxs};
`;

export { Wrapper, Header, DateWrapper, CounterWrapper, ItemList };
