import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import TextBox from 'atoms/TextBox';
import { ButtonGroup, Button as Buttons } from 'atoms/Button';
import { Button } from 'src/ui';
const animations = {
    slideCartDown: undefined,
    slideCartUp: undefined,
    animateChildren: undefined,
};
const MiniCartWrap = styled.div `
  position: fixed;
  max-width: 75rem;
  z-index: 70;
  /* @todo should not need to be 70 ,
  changed to show the StyledCircleLoader*/
  margin: auto;
  left: 0;
  right: 0;
`;
const MiniCartSidebar = styled.aside `
  position: absolute;
  /* @todo should not need to be 70 */
  z-index: 70;
  transform: translateY(0);
  right: 0;
  height: 60vh;
  overflow: auto;
  background: var(--color-pure-white);
  border-radius: rem(6);

  &::-webkit-scrollbar {
    width: 8px;
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background: var(--color-blue);
    border-radius: rem(6);
  }

  section.product-price-panel,
  .grand-total-details {
    display: flex;
  }
  .grand-total-details {
    padding-top: rem(18);
  }
  .price-panel-value {
    flex: 0 0 35%;
  }
  .total-item-price-wrap,
  .price-panel-label {
    flex: 0 0 65%;
  }

  position: absolute;
  /* @todo should not need to be 70 */
  z-index: 70;
  transform: translateY(0);
  right: 0;
  height: 60vh;

  @media (max-width: 1200px) and (min-width: 768px) {
    margin-right: var(--spacing-medium);
  }
  top: 5rem;
  ${media.desktopOrLarger `
    width: rem(420);
    height: 70vh;
    top: 5rem;
  `}
  ${media.tabletOrLarger `
    height: 80vh;
    width: rem(420);
    top: 8rem;
  `}
  ${media.tabletOrSmaller `
    top: 5.5rem;
  `}
  ${media.phoneOrSmaller `
    width: 100%;
    height: 90vh;
    top: 4rem;
    padding: rem(5);
  `}


  @keyframes slideCartDown {
    0% {
      opacity: 0;
      max-height: 0;
    }
    1% {
      opacity: 0.9;
    }
    25% {
      opacity: 1;
      max-height: 60vh;
    }
    50% {
      opacity: 1;
      max-height: 80vh;
    }

    100% {
      max-height: calc(90vh - (5rem + 1rem));
    }
  }

  @keyframes slideCartup {
    100% {
      opacity: 0;
      max-height: 0;
    }
    99% {
      opacity: 0.9;
    }
    50% {
      opacity: 1;
      max-height: 60vh;
    }
    25% {
      opacity: 1;
      max-height: 80vh;
    }

    0% {
      max-height: calc(90vh - (5rem + 1rem));
    }
  }

  animation-duration: 0.35s;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  ${(props) => props.isVisible === false &&
    styled.css `
      display: none;
      opacity: 0;
      max-height: 0;
    `}
  ${(props) => props.isVisible === true &&
    styled.css `
      display: flex;
      animation-name: slideCartDown;
    `}
`;
const MiniCartSidebarBox = styled.div `
  display: flex;
  flex-direction: column;
  background: unset;
  background-color: var(--color-white-grey);
  padding: 0 0.5rem;
  border-radius: 2px;
`;
const Overlay = styled.div `
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.2);

  /* @todo the other overlay does this but with animation */
  ${(props) => props.isVisible === false &&
    styled.css `
      display: none;
    `};
`;
const EstimateShippingContainer = styled.div `
  background-color: var(--color-pure-white);
  padding-right: var(--spacing-small);
  padding-left: var(--spacing-small);
  padding-top: rem(10);
  padding-bottom: rem(44);
  border-radius: var(--spacing-extra-small);
  margin-top: var(--spacing-small);
  margin-bottom: rem(20);
  ${media.phoneOrSmaller `
    padding-bottom: rem(20);
  `}
`;
const EstimateShippingWrapper = styled.div `
  display: flex;
  flex-direction: row;
  ${media.tabletOrLarger `
    justify-content: flex-end;
  `}
  .input-box-wrapper {
    margin-bottom: 0rem;
    label {
      font: italic $font-16-regular;
      color: var(--color-light-grey);
      width: rem(80);
      top: 0.85rem;
    }
  }
  .input-box-wrapper {
    flex-basis: unset;
    width: rem(350);
    height: rem(44);
    ${media.phoneOrSmaller `
      width: 50%;
    `}
  }
`;
const EnterZipCodeText = styled.div `
  color: var(--color-black);
  @font (14, semi);
  margin-bottom: var(--spacing-medium);
  ${media.tabletOrLarger `
    display: flex;
    justify-content: flex-end;
    margin-right: rem(152);
  `}
  ${media.desktopOrLarger `
    margin-right: rem(164);
  `}
`;
const CustomizedButton = styled.withComponent(Button) `
  background-color: var(--color-light-grey);
  height: rem(44);
  margin-left: var(--spacing-medium);
  border-radius: var(--spacing-extra-small);
  width: rem(150);
  flex-basis: unset;
  ${media.tabletOrSmaller `
    margin-left: var(--spacing-extra-small);
  `}
  ${media.phoneOrSmaller `
    width: 50%;
  `}
  label {
    @font(18, semi);
    color: var(--color-pure-white);
    text-transform: capitalize;
    margin-top: var(--spacing-very-small);
  }
`;
const CustomizedTextBox = styled.withComponent(TextBox) `
  height: rem(44);
  border-radius: var(--spacing-extra-small);
  animatePlaceholder: false;
`;
const NoItemText = styled.span.attrs({
    'data-qa': 'qa-no-items-message',
}) `
  display: flex;
  justify-content: center;
  width: rem(404);
  height: rem(365);

  padding: 1rem;
  @font (32, semi);
  line-height: rem(30);
  letter-spacing: -rem(0.2);
  ${media.phoneOrSmaller `
    width: 100%;
    @font (24,semi);
    padding: var(--spacing-big) var(--spacing-small);
  `}

  background: var(--color-pure-white);
  color: var(--color-black);
`;
const LinkButton = styled.withComponent(Buttons) `
  @font(18, semi);
  display: flex;
  align-items: center;
  margin: 0 auto;
  flex: 1;
  align-self: flex-end;

  width: 100%;
  padding: var(--spacing-medium);
  text-transform: capitalize;
  justify-content: center;
  padding: 0;
  background-color: var(--color-blue);
  border-radius: rem(4);
  a {
    padding: 0.85rem;
    color: var(--color-pure-white);
  }
`;
const StyledButtonGroup = styled.withComponent(ButtonGroup) `
  width: rem(254);
  align-self: flex-end;
  padding: 0 var(--spacing-small) var(--spacing-medium);
`;
export { animations, MiniCartWrap, MiniCartSidebar, MiniCartSidebarBox, Overlay, EstimateShippingContainer, EstimateShippingWrapper, CustomizedTextBox, CustomizedButton, EnterZipCodeText, NoItemText, LinkButton, StyledButtonGroup, };
//# sourceMappingURL=_elements.js.map