"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

const Text_1 = require("../../../../../atoms/Text");

const Placeholder_1 = require("../../../../../atoms/Placeholder");

const TextPlaceholder = styleh_components_1.styled.withComponent(Placeholder_1.TextPlaceholder)``;
exports.TextPlaceholder = TextPlaceholder;
const StyledText = Text_1.StyledBaseText.as('span');
const StyledDetails = styleh_components_1.styled.withComponent(StyledText)``;
exports.StyledDetails = StyledDetails;
const StyledStatus = styleh_components_1.styled.withComponent(StyledText)``;
exports.StyledStatus = StyledStatus;
const StyledSeparator = styleh_components_1.styled.span``;
exports.StyledSeparator = StyledSeparator;
const StyledEmail = styleh_components_1.styled.withComponent(StyledText)``;
exports.StyledEmail = StyledEmail;
const StyledIdentifier = styleh_components_1.styled.withComponent(StyledText)``;
exports.StyledIdentifier = StyledIdentifier;
const StyledName = styleh_components_1.styled.withComponent(StyledText).attrs({
  'data-qa': 'qa-user-name'
})``;
exports.StyledName = StyledName;
const StatusWrapper = styleh_components_1.styled.div.attrs({
  'data-qa': 'qa-user-status'
})`grid-area:status;display:flex;justify-content:flex-end;`;
exports.StatusWrapper = StatusWrapper;
const TeamRoleWrapper = styleh_components_1.styled.div`grid-area:teamrole;`;
exports.TeamRoleWrapper = TeamRoleWrapper;
const EmailWrapper = styleh_components_1.styled.div.attrs({
  'data-qa': 'qa-user-email'
})`grid-area:email;@media (max-width:767px){display:none;}`;
exports.EmailWrapper = EmailWrapper;
const IdentifierWrapper = styleh_components_1.styled.div.attrs({
  'data-qa': 'qa-user-identifier'
})`grid-area:identifier;`;
exports.IdentifierWrapper = IdentifierWrapper;
const NameWrapper = styleh_components_1.styled.div`grid-area:name;`;
exports.NameWrapper = NameWrapper;
const Wrapper = styleh_components_1.styled.div`display:grid;grid-template-columns:repeat(4,1fr);grid-template-areas:'name identifier email .' '. . teamrole status';@media (max-width:1023px){grid-template-columns:repeat(3,1fr);grid-template-areas:'name email .' 'identifier teamrole status';}@media (max-width:767px){grid-template-columns:repeat(2,1fr);grid-template-areas:'name identifier . .' 'teamrole email . status';}div{margin-bottom:0.5rem;}`;
exports.Wrapper = Wrapper; //# sourceMappingURL=styled.js.map