import styled from "styled-components";

const Item = styled.div`
  display: flex;
  background-color: ${(p) => p.theme.color.uiBackground02};
  border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
  height: ${(p) => p.theme.spacing.l};
  cursor: pointer;
  position: relative;
  :before {
    content: "";
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  &:hover {
    &:before {
      background-color: ${(p) => p.theme.color.overlayHoverPrimary};
    }
  }
`;

const User = styled.div`
  display: flex;
  align-items: center;
  width: 24%;
  padding-left: ${(p) => p.theme.spacing.s};
`;

const Name = styled.div`
  position: relative;
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.colors.textHighEmphasis};
  min-width: 0;
  > * {
    min-width: 0;
    max-width: 100%;
  }
`;

const Title = styled.div`
  width: 100%;
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.colors.textHighEmphasis};
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  min-width: 0;
`;

const AvatarWrapper = styled.div`
  margin-right: ${(p) => p.theme.spacing.s};
`;

const Time = styled.div`
  ${(p) => p.theme.textStyle.uiXS};
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${(p) => p.theme.colors.textMediumEmphasis};
  width: 8%;
`;

const Site = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
`;

const ContentType = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
`;

const Event = styled.div`
  ${(p) => p.theme.textStyle.uiS};
  color: ${(p) => p.theme.colors.textMediumEmphasis};
  width: 38%;
  padding-right: ${(p) => p.theme.spacing.s};
  align-content: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  span {
    margin-left: ${(p) => p.theme.spacing.xxs};
    color: ${(p) => p.theme.colors.interactive01};
  }
`;

export { Item, User, Name, Title, AvatarWrapper, Time, Site, ContentType, Event };
