'use strict';

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

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

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

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

const Wrapper = styled__default['default'].div `
  display: flex;
  position: relative;
  flex-direction: column;
  direction: ${(props) => (props.rtl ? 'rtl' : 'ltr')};
  max-width: 100%;
`;
const InnerWrapper = styled__default['default'].div `
  display: grid;
  grid-template-columns: 85% 15%;
  overflow: hidden;
  position: relative;
`;
const TabsContainer = styled__default['default'].div `
  display: flex;
  position: relative;
  padding: 1px;
  overflow-x: scroll;
  scroll-behavior: smooth;
  &::-webkit-scrollbar {
    display: none;
  }
  -ms-overflow-style: none; /* IE and Edge */
`;
const TabWrapper = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'narrow',
        'selected',
        'disabled',
    ]),
}) `
  display: flex;
  justify-content: center;
  align-items: center;
  padding: ${(props) => (props.narrow ? '12px' : '8px 16px')};
  border-radius: ${(props) => props.theme.radius.roundedA};
  width: ${(props) => (props.narrow ? '70%' : 'fit-content')};
  margin-bottom: ${index.getSpacing('s01')};
  ${(props) => utils.getTabsColor(props)}
  font-family: ${(props) => props.theme.font.familyPrimary};
  ${index.getFontSize('size16')};
  font-weight: ${(props) => props.theme.font.weightBold};
  outline-color: ${index.getColorAlias('focusOuter')};
  max-width: 400px;
  cursor: pointer;
  ${index.getDefaultTransition('background')}

  &:hover {
    background: ${index.getDarkenColor('hover01', 'containerDefault')};
  }
  &:active {
    background: ${index.getDarkenColor('active01', 'containerDefault')};
  }
`;
const TabIndicator = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['brandColor']),
}) `
  position: absolute;
  width: ${(props) => props.width}px;
  bottom: 0;
  left: ${(props) => props.left}px;
  height: 4px;
  border-top-left-radius: ${(props) => props.theme.radius.roundedA};
  border-top-right-radius: ${(props) => props.theme.radius.roundedA};
  background: ${(props) => index.getColorAlias(props.brandColor ? 'interactiveBrand' : 'interactivePrimary')};
  transition: ${({ theme }) => `${theme.motion.speed.defaultS} ${theme.motion.easing.easeDefault}`};
`;
const ExpandWrapper = styled__default['default'].div `
  position: absolute;
  padding: 8px 16px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 1) 100%
  );
  border: none;
  margin-bottom: 16px;
  transform: translate(0, -50%);
  top: 50%;
  left: ${(props) => props.left}px;
  min-width: 84px;
  min-height: ${(props) => props.minHeight}px;
`;
const TabList = styled__default['default'].div ``;
const ExpandedTabItem = styled__default['default'].div `
  padding: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-bottom: 1px solid ${index.getColorAlias('dividerDefault')};

  &:hover {
    background: ${index.getDarkenColor('hover01', 'containerDefault')};
  }
  &:active {
    background: ${index.getDarkenColor('active01', 'containerDefault')};
  }

  svg {
    fill: ${index.getColorAlias('contentSubdued')};
    stroke: ${index.getColorAlias('contentSubdued')};
  }
`;
const ExpandedItemText = styled__default['default'].div `
  display: flex;
  flex-direction: column;
  width: 95%;
  padding-right: 20px;
`;
const ExpandedLabel = styled__default['default'].span `
  font-weight: ${(props) => props.selected
    ? props.theme.font.weightBold
    : props.theme.font.weightRegular};
  ${index.getFontSize('size16')};
`;
const ExpandedSecondary = styled__default['default'].span `
  ${index.getFontSize('size14')};
  color: ${index.getColorAlias('contentSubdued')};
`;
const DismissWrapper = styled__default['default'].div `
  padding-top: ${index.getSpacing('s04')};
  margin: 0 auto;
  width: 95%;
`;
styled__default['default'].div `
  border-bottom: 1px solid ${index.getColorAlias('borderDefault')};
  width: 100%;
`;
styled__default['default'].div `
  height: 500px;
  width: 100%;
  font-family: ${(props) => props.theme.font.familyPrimary};
`;

exports.DismissWrapper = DismissWrapper;
exports.ExpandWrapper = ExpandWrapper;
exports.ExpandedItemText = ExpandedItemText;
exports.ExpandedLabel = ExpandedLabel;
exports.ExpandedSecondary = ExpandedSecondary;
exports.ExpandedTabItem = ExpandedTabItem;
exports.InnerWrapper = InnerWrapper;
exports.TabIndicator = TabIndicator;
exports.TabList = TabList;
exports.TabWrapper = TabWrapper;
exports.TabsContainer = TabsContainer;
exports.Wrapper = Wrapper;
