import { media, fontValue } from '@skava/styleh-toolset';
import { styled } from 'styleh-components';
import { LinkAdapter } from './renderProps';
export const FigureImage = styled.img `
  width: 100%;
`;
export const Title = styled.span `
  display: block;
  font: ${fontValue(1, 'regular')};
  font-size: 3vw;

  strong {
    font: ${fontValue(1, 'regular')};
    font-size: 8vw;
  }

  ${media.phoneOrSmaller `
    font-size: 12vw;

    strong {
      font-size: 8vw;
      font-weight: bold;
    }
  `}
`;
export const BannerContainer = styled.header `
  @container();
  display: flex;
  margin-top: var(--spacing-medium);
  margin: 0 auto;
  padding: var(--spacing-extra-small) 0;

  ${media.phoneOrSmaller `
    margin-top: 1.25rem;
    display: block;
    padding: 0 0.625rem;
    margin-bottom: rem(30);
    padding: 0 var(--spacing-extra-small);
    margin-top: 0;
    margin-bottom: 0;

    .items figure:last-child {
      display: flex;
    }
  `}
  ${media.desktopOrSmaller `
    padding-left: var(--spacing-small);
    padding-right: var(--spacing-small);
  `}
  ${media.tabletOrSmaller `
    padding: 0 var(--spacing-small);
    .items2 figure:last-child {
      display: flex;
      order: 0 !important;
    }
  `}
`;
export const FigureWrapper = styled.div `
  margin: 0 auto;
  width: 100%;
`;
export const FigureContainer = styled.div.attrs({
    className: (props) => props.type,
}) `
  display: flex;
  flex-wrap: wrap;
  margin-left: -var(--spacing-extra-small);
  margin-right: -var(--spacing-extra-small);
`;
// @note daniel said no border radius
export const StyledLink = styled(LinkAdapter).attrs({
    'data-qa': 'qa-banner',
}) `
  display: block;
  overflow: hidden;
  position: relative;
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: var(--color-black);
    left: 0;
    top: 0;
    opacity: 0.1;
    transition: all 250ms ease;
  }
  &:hover {
    &:after {
      opacity: 0;
    }
  }
  ${media.phoneOrSmaller `
    border-radius: 0;
  `}
`;
/**
 * @todo @@perf use image
 */
export const Figure = styled.figure `
  margin: 0 0.5rem;
  padding: 0;
  flex: 1;
  position: relative;

  padding: var(--spacing-extra-small);
  margin: 0;
  flex: 0 0 33.3%;

  &:first-child {
    margin-left: 0;
  }
  &:last-child {
    margin-right: 0;
  }
  &:nth-child(4) {
    order: 0;
  }
  ${media.tabletOrSmaller `
    flex: 0 0 50%;
    flex-wrap: wrap;
    display: flex;
  `}
  ${media.phoneOrSmaller `
    margin: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: var(--spacing-extra-small);
    flex: 0 0 100%;

    &:not(:first-child) {
      margin-top: 1.25rem;
      margin-top: 0;
    }
    ${(props) => props.bannerSize === 'banner-large' &&
    styled.css `
        padding-bottom: 0.5rem;
    `};
    ${(props) => (props.bannerSize === 'banner-medium' || props.bannerSize === 'banner-small') &&
    styled.css `
        flex: 0 0 calc(50% - 8px);
    `};
  `}
  ${media.phoneOrLarger `
    ${(props) => props.bannerSize === 'banner-large' &&
    styled.css `
        flex: 0 0 100%;
      `};
  `}
  ${media.desktopOrLarger `
    ${(props) => props.bannerSize === 'banner-medium' &&
    styled.css `
        flex: 0 0 66.6%;
      `};
    ${(props) => props.bannerSize === 'banner-small' &&
    styled.css `
        flex: 0 0 33.3%;
      `};
  `}
  ${media.tabletOrSmaller `
    ${(props) => (props.bannerSize === 'banner-large' ||
    props.bannerSize === 'banner-medium' ||
    props.bannerSize === 'banner-small') &&
    props.screenWidth &&
    styled.css `
        ${FigureImage} {
          height: ${props.screenWidth / 2}px;
          max-width: unset;
          width: auto;
        }
      `};
    ${(props) => props.bannerSize === 'banner-large' &&
    styled.css `
        margin-bottom: 0;
      `};
    ${(props) => (props.bannerSize === 'banner-medium' || props.bannerSize === 'banner-small') &&
    styled.css `
        flex: 0 0 calc(50% - 12px);
      `};
    ${(props) => (props.bannerSize === 'banner-medium' || props.bannerSize === 'banner-large') &&
    styled.css `
        overflow: hidden;
      `};
  `}
`;
export const FigureCaption = styled.figcaption `
  position: absolute;
  top: 0;
  left: var(--spacing-medium);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-pure-white);
  font-family: roboto;
  bottom: rem(30);
  right: rem(30);
  height: auto;
  top: unset;
  left: unset;
  text-transform: uppercase;
  .ghost {
    margin-top: var(--spacing-medium);
  }
  // unused codes
  .title-small {
    font-size: rem(15);
  }
  .title-large {
    font-size: rem(46);
  }
  .title-medium {
    font-size: rem(40);
  }
`;
//# sourceMappingURL=styled.js.map