'use strict';

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

var styled = require('styled-components');
require('react');
var ChevronLeft = require('../../icons/ChevronLeft.js');
var ChevronRight = require('../../icons/ChevronRight.js');
var index = require('../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const BreadcrumbItem = styled__default['default'].button `
  align-items: center;
  background: transparent;
  border: none;
  color: ${index.getColorAlias('contentDefault')};
  display: flex;
  height: 100%;
  padding: 0;
  ${index.getFontSize('size16')};
  cursor: ${(props) => (props.onClick || props.href ? 'pointer' : 'default')};
  font-weight: ${(props) => props.theme.font.weightBold};
  text-decoration: ${(props) => (props.href ? 'none' : 'initial')};
`;
const BreadcrumbChevron = styled__default['default'](ChevronRight['default']) `
  fill: ${index.getColorAlias('contentDefault')};
  margin: ${index.getSpacing('s00', 's01')};
  width: 12px;
`;
const BreadcrumbBackChevron = styled__default['default'](ChevronLeft['default']) `
  fill: ${index.getColorAlias('contentDefault')};
  margin: ${index.getSpacing('s00', 's01')};
  width: 14px;
`;
const BreadcrumbCurrentPage = styled__default['default'].span `
  color: ${index.getColorAlias('contentDefault')};
  height: 100%;
  ${index.getFontSize('size16')};
  text-decoration: none;
`;
const BreadcrumbWrapper = styled__default['default'].nav `
  display: flex;
  cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
  flex-flow: row nowrap;
  align-items: center;
  width: fit-content;

  ${(props) => {
    switch (props.variant) {
        case 'back':
            return styled.css `
          padding: ${index.getSpacing('s01', 's03', 's01', 's02')};
        `;
        case 'default':
        default:
            return styled.css `
          padding: ${index.getSpacing('s01', 's04')};
        `;
    }
}}

  ${(props) => props.scrim &&
    styled.css `
      background: ${index.getColorAlias('overlay')};
      border-radius: ${(props) => props.theme.radius.roundedD};

      ${BreadcrumbItem}, ${BreadcrumbCurrentPage} {
        color: ${index.getColorAlias('contentLinkLight')};
      }

      ${BreadcrumbChevron}, ${BreadcrumbBackChevron} {
        fill: ${index.getColorAlias('contentLight')};
      }
    `}
`;

exports.BreadcrumbBackChevron = BreadcrumbBackChevron;
exports.BreadcrumbChevron = BreadcrumbChevron;
exports.BreadcrumbCurrentPage = BreadcrumbCurrentPage;
exports.BreadcrumbItem = BreadcrumbItem;
exports.BreadcrumbWrapper = BreadcrumbWrapper;
