import styled from "styled-components";

const Item = styled.li`
  ${(p) => p.theme.textStyle.uiS};
  cursor: pointer;
  padding: ${(p) => p.theme.spacing.s};
  padding-bottom: ${(p) => p.theme.spacing.s};
  margin-bottom: ${(p) => p.theme.spacing.xs};
  box-shadow: ${(p) => p.theme.shadow.shadowS};
  border-radius: ${(p) => p.theme.radii.s};
  background-color: ${(p) => p.theme.color.interactiveBackground};
  &:hover {
    background: ${(p) => p.theme.color.overlayHoverPrimary};
  }
  &:focus {
    background-color: ${(p) => p.theme.color.overlayFocusPrimary};
  }
`;

export { Item };
