'use strict';

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

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

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

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

const sheetLayout = (orientation = 'right', fixed = false, isOpen = false, width = '25%') => {
    if (fixed) {
        if (orientation === 'right') {
            return styled.css `
        width: ${width};
        right: 0;
        bottom: 0;
      `;
        }
        return styled.css `
      width: ${width};
      left: 0;
      bottom: 0;
    `;
    }
    if (orientation === 'right') {
        return styled.css `
      top: 0;
      right: 0;
      transform: translateX(${isOpen ? '0' : '100%'});
    `;
    }
    return styled.css `
    top: 0;
    left: -${width};
    transform: translateX(${isOpen ? '100%' : '0'});
  `;
};
const SideSheetContainer = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'isOpen',
        'fixed',
        'orientation',
        'width',
    ]),
}) `
  height: 100vh;
  background: ${index.getColorAlias('containerDefault')};
  color: ${index.getColorAlias('contentDefault')};
  position: fixed;
  z-index: 1200;
  width: ${(props) => props.width};
  ${(props) => sheetLayout(props.orientation, props.fixed, props.isOpen, props.width)}
  transition: ${({ theme }) => `all ${theme.motion.speed.defaultS} ${theme.motion.easing.easeDefault}`};
  box-shadow: ${(props) => props.theme.elevation.e2};
  font-family: ${(props) => props.theme.font.familyPrimary};
  font-size: ${index.getFontSize('size16')};
`;
const SideSheetContentWrapper = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['customContent']),
}) `
  ${(props) => props.customContent
    ? styled.css `
          padding: ${index.getSpacing('s00', 's00')};
        `
    : styled.css `
          padding: ${index.getSpacing('s00', 's04')};
        `};
`;
const HeaderWrapper = styled__default['default'].div `
  width: 100%;
  height: 80px;
  font-family: ${(props) => props.theme.font.familyPrimary};
  font-weight: ${(props) => props.theme.font.weightBold};
  display: flex;
  justify-content: space-between;
  align-items: center;
`;
const TitleWrapper = styled__default['default'].div ``;
const BackDrop = styled__default['default'].div `
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: ${index.getColorAlias('backgroundDark')};
  opacity: 0.5;
  z-index: 100;
  top: 0;
  right: 0;
`;
const CloseButton = styled__default['default'](Close['default']) `
  fill: ${index.getColorAlias('contentDefault')};
  cursor: pointer;
  padding-bottom: 4px;
  width: 25px;
  height: 25px;
`;

exports.BackDrop = BackDrop;
exports.CloseButton = CloseButton;
exports.HeaderWrapper = HeaderWrapper;
exports.SideSheetContainer = SideSheetContainer;
exports.SideSheetContentWrapper = SideSheetContentWrapper;
exports.TitleWrapper = TitleWrapper;
