import styled from "styled-components";

const SitesContent = styled.div`
  padding-top: ${(p) => p.theme.spacing.s};
`;

const RolesContent = styled.div`
  padding-top: ${(p) => p.theme.spacing.s};
`;

const SitesHeader = styled.div`
  ${(p) => p.theme.textStyle.headingXS};
  margin-bottom: ${(p) => p.theme.spacing.s};
`;

const SitesGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: ${(p) => p.theme.spacing.xs};
`;

const SiteCard = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${(p) => p.theme.spacing.xxs};
  background-color: ${(p) => p.theme.color.uiBackground02};
  border: 1px solid ${(p) => p.theme.color.uiLine};
  border-radius: ${(p) => p.theme.radii.s};
  padding: ${(p) => p.theme.spacing.s};
  height: 96px;
`;

const SiteCardHeader = styled.div`
  display: flex;
  align-items: center;
  gap: ${(p) => p.theme.spacing.xxs};
`;

const SiteAvatar = styled.img`
  width: 32px;
  height: 32px;
  border-radius: ${(p) => p.theme.radii.xs};
  object-fit: cover;
  flex-shrink: 0;
  margin-right: ${(p) => p.theme.spacing.xxs};
`;

const SiteName = styled.div`
  ${(p) => p.theme.textStyle.uiL};
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

const TagsRow = styled.div`
  display: flex;
  align-items: center;
  gap: ${(p) => p.theme.spacing.xxs};
  flex-wrap: wrap;
  margin-top: auto;

  & > div {
    margin-bottom: 0;
  }
`;

export { RolesContent, SitesContent, SitesHeader, SitesGrid, SiteCard, SiteCardHeader, SiteAvatar, SiteName, TagsRow };
