import { styled } from 'styleh-components';
import { Main, Cell } from '@skava/packages/ui';
import TabbedProductList from '@skava/packages/features/SwipableProductList/TabbedProductList/index';
import { Text, FormBuilder, CategoryGrid } from '@skava/ui-presets/dist/presets/Studio';
import { MediaCarousel, StyledImage } from '@skava/ui/dist/components/organisms/MediaCarousel';
export const StyledTabbedProductList = styled(TabbedProductList) `
  /* can style it here for the rows, or change to render props or whatever */
`;
export const StyledMain = styled(Main) `
  width: 100%;
  max-width: 75rem;
  margin: auto;
`;
export const StyledCell = styled(Cell) `
  z-index: 1;
  vertical-align: top;

  /**
  * if the widget has over action such like tabbed widget/product block
  * then this fix is must required
  */
  ${(props) => props.shouldBeTopOnHover &&
    styled.css `
      &:hover {
        z-index: 2;
      }
    `}
`;
export const PreloaderContainer = styled.div `
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`;
/**
 * === @@demo ??? @@packages ===
 */
export const BackgroundColor = styled.div `
  background-color: #292929;
`;
export const StyledFormBuilder = styled(FormBuilder) `
  padding: 40px 0 25px 0;
  h6 {
    color: var(--color-pure-white);
  }
  button {
    background: var(--color-pure-white) !important;
    span {
      color: #292929 !important;
    }
  }
`;
export const StyledText = styled(Text) `
  text-align: center;
  color: var(--color-black);
  font: normal 36px 'Arial';
  div {
    max-width: 100%;
    text-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }
`;
export const StyledCategoryGrid = styled(CategoryGrid) `
  position: relative;
  bottom: 25px;
  h2 {
    display: none;
  }
`;
export const StyledMediaCarousel = styled(MediaCarousel) `
  ${StyledImage} {
    border: none;
    height: rem(596);
    img {
      margin: 0 auto;
    }
  }
`;
export const TabbedHeading = styled.h2 `
  text-align: center;
  color: var(--color-black);
  font: normal 36px 'Arial';
  margin: var(--spacing2x) 0 0;
  padding: var(--spacing2x) 0 var(--spacing-small) 0;
`;
//# sourceMappingURL=styled.js.map