import styled from "styled-components";

const PageItem = styled.div`
  position: relative;
  background-color: ${(p) => p.theme.color.uiBackground02};
  display: flex;
  border: 1px solid ${(p) => p.theme.color.uiLine};
  border-radius: ${(p) => p.theme.radii.s};
  margin-bottom: ${(p) => p.theme.spacing.xs};
  padding: ${(p) => p.theme.spacing.xxs};
  cursor: pointer;
  &:last-child {
    margin-bottom: 0;
  }

  :before {
    content: "";
    border-radius: ${(p) => p.theme.radii.s};
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.1s;
    z-index: 2;
  }

  :hover:before {
    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
    opacity: 1;
  }

  :focus {
    outline: 1px solid ${(p) => p.theme.color.interactive01};
  }
`;

const Header = styled.div`
  display: flex;
  width: 100%;
`;

const Check = styled.div`
  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.xs} 0 12px`};
`;

const PageInfo = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
`;

const Type = styled.div`
  padding: ${(p) => p.theme.spacing.xs} 0;
  ${(p) => p.theme.textStyle.headingXXS};
  color: ${(p) => p.theme.color.textLowEmphasis};
  flex-grow: 2;
`;

const DateWrapper = styled.div`
  padding: ${(p) => p.theme.spacing.xs};
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  flex-grow: 1;
  text-align: right;
`;

const Title = styled.div`
  padding-bottom: ${(p) => p.theme.spacing.xxs};
  ${(p) => p.theme.textStyle.uiL};
  color: ${(p) => p.theme.color.textHighEmphasis};
  font-weight: 400;
`;

const FullUrl = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  color: ${(p) => p.theme.color.textMediumEmphasis};
  padding-bottom: ${(p) => p.theme.spacing.xs};
`;

export { PageItem, Check, Type, Title, DateWrapper, Header, PageInfo, FullUrl };
