import { media, rem } from '@skava/styleh-toolset';
import { styled } from 'styleh-components';
import { VideoPreset } from '@skava/packages/ui';
import { HeroBanner } from '@skava/ui-presets/dist/presets/Studio';
import { Background } from './fixture';
export const { VideoLogoPanel, VideoSlogan } = VideoPreset;
export const Video = styled(VideoPreset.Video) `
  > video {
    object-fit: contain;
    width: 100%;
  }
  ${VideoSlogan} {
    display: none;
  }
  ${media.phoneOrSmaller `
    ${VideoLogoPanel} {
      display: none;
    }
  `}
`;
// @todo !
export const textShadow = styled.css `
  text-shadow: $textShadow;
`;
export const HomeWrapper = styled.div `
  background: var(--color-white-grey);
`;
/**
 * @todo correct this font
 * @james @creative
 */
export const HomeHeadingContainer = styled.div `
  max-width: 1200px;
  margin: 0 auto;

  font: bold 72px "Roboto Condensed";
  ${textShadow};
  padding: rem(26) 0 rem(22) 0;
  text-transform: uppercase;
  color: var(--color-pure-white);
  line-height: rem(66);
  letter-spacing: -rem(0.45);

  .shop-now .svg-icon {
    width: 1.75rem;
    height: rem(26);
    margin-left: var(--spacing-medium);
    stroke: var(--color-blue);
    fill: var(--color-blue);
    &:nth-of-type(1) {
      fill: transparent;
      stroke-width: var(--spacing-small);
    }
  }

  @media (max-width: 1200px) {
    padding-left: var(--spacing-small);
    padding-right: var(--spacing-small);
  }

  ${media.tabletOrSmaller `
    font: bold 52px "Roboto Condensed";
    padding: ${rem(40)} var(--spacing-small) ${rem(34)} var(--spacing-small);
    line-height: ${rem(50)};
    letter-spacing: -${rem(0.32)};
 `}

  ${media.phoneOrSmaller `
    font: bold 52px "Roboto Condensed";
    line-height: ${rem(30)};
    letter-spacing: -${rem(0.2)};
    padding: 0.75rem var(--spacing-small) var(--spacing-small);
  `}
`;
/**
 * @note the style for this are based on a div -.-
 */
export const HomeTitle = styled.h1 `
  margin: unset;
  padding: unset;
  font-size: unset;
`;
/**
 * @todo should be role img
 */
export const HomeWidgetOrderWrap = styled.div `
  background: url(${Background.mainBG}) no-repeat 0 0/100%;
`;
export const HomeWidgetOrderBottom = styled.div `
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgb(245, 244, 244) 100%);
`;
export const StyledHeroBanner = styled(HeroBanner) `
  margin: 0 auto;
  max-width: 75rem;
  ${media.tabletOrSmaller `
    margin: 0 0.5rem;
  `}
  ${media.phoneOrSmaller `
    display: none;
  `}
`;
//# sourceMappingURL=styled.js.map