"use strict";

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

const tslib_1 = require("tslib");

const react_1 = tslib_1.__importDefault(require("react"));

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

const Separator_1 = require("../../atoms/Separator");

const Link_1 = require("../../atoms/Link");

const flexItemStyles = styleh_components_1.styled.css`display:inline-flex;`;
const flexList = styleh_components_1.styled.css`max-width:75rem;margin:0 auto;;display:flex;align-items:center;`;
const breadCrumbItemStyles = styleh_components_1.styled.css`${flexItemStyles};color:var(--color-light-grey);&:last-child{color:var(--color-dark-grey);}`;
exports.BreadCrumbWrapper = styleh_components_1.styled.div`display:flex;align-items:center;background:var(--color-blue);font:500 0.8125rem "Roboto",Arial,Helvetica,sans-serif;${flexList};height:2.5rem;max-width:1200px;overflow:auto;@media (min-width:1024px){padding:0 1rem;}@media (max-width:1023px){padding-left:0.5rem;}`;
const itemStyles = styleh_components_1.styled.css`padding-right:1rem;font:400 0.875rem "Roboto",Arial,Helvetica,sans-serif;color:var(--color-pure-white);white-space:nowrap;&:hover,&:last-child{color:var(--color-pure-white);}@media (max-width:767px){padding-right:0.5rem;}`;
exports.StyledBreadCrumbItem = styleh_components_1.styled.span`${breadCrumbItemStyles};${itemStyles};`;

const LinkAdapter = props => react_1.default.createElement(Link_1.Link, Object.assign({
  "data-qa": 'qa-breadcrumb'
}, props));

exports.BreadCrumbItemLink = styleh_components_1.styled(LinkAdapter)`${breadCrumbItemStyles};${itemStyles};text-decoration:none;`;

const SeparatorWithArrow = props => react_1.default.createElement(Separator_1.Separator, Object.assign({}, props, {
  // fill={styled.theme.colorsBreadcrumbSeparator}
  pipe: false,
  arrow: true
}));
/**
 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SEPARATOR
 */


exports.Separator = styleh_components_1.styled(SeparatorWithArrow)`${flexItemStyles};padding:0 1rem 0 0;color:var(--color-pure-white);g > path{fill:var(--color-pure-white);}@media (max-width:767px){padding:0 0.5rem 0 0;}`; //# sourceMappingURL=styled.js.map