import styled from "styled-components";

const Item = styled.li`
  ${(p) => p.theme.textStyle.uiS};
  cursor: pointer;
  padding: ${(p) => p.theme.spacing.xs};
  padding-bottom: ${(p) => p.theme.spacing.xs};
  padding-top: ${(p) => p.theme.spacing.xs};
  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};
  min-height: ${(p) => p.theme.spacing.l};
  align-content: center;
  &:hover {
    background: ${(p) => p.theme.color.overlayHoverPrimary};
  }
  &:focus {
    background-color: ${(p) => p.theme.color.overlayFocusPrimary};
  }
`;

const Thumbnail = styled.img`
  cursor: pointer;
  padding-bottom: ${(p) => p.theme.spacing.xs};
`;

const TagWrapper = styled.div`
  margin-top: ${(p) => p.theme.spacing.xs};
`;

export { Item, Thumbnail, TagWrapper };
