import styled, { css } from 'styled-components';
import { hideVisually, rgba } from 'polished';
import { defaultThemeProp } from '../../theme';
import { tryCatch } from '../../utils';
import { calculateFontSize } from '../../styles';
import BareButton from '../Button/BareButton';
import { StyledIcon } from '../Icon';
import { StyledMetaList } from '../MetaList/MetaList';
import { StyledErrorState } from '../ErrorState';
import { StyledText } from '../Text';
import { useDirection } from '../../hooks';
import Backdrop from '../Backdrop';
import { StyledLink } from '../Link/Link';
export const StyledHeader = styled.header(({ theme }) => {
    const color = tryCatch(() => rgba(theme.base.palette.light, theme.base.transparency['transparent-2']));
    return css `
    position: relative;
    width: 100%;
    padding: ${theme.base.spacing};
    color: ${color};

    ${StyledMetaList} {
      justify-content: center;
      li {
        color: ${color};
      }
    }
  `;
});
StyledHeader.defaultProps = defaultThemeProp;
export const StyledCountTracker = styled.div(({ theme }) => {
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    return css `
    font-size: ${fontSize.xs};
    text-align: center;
    min-width: calc(2 * ${theme.base['hit-area']['mouse-min']});

    @media (pointer: coarse) {
      min-width: calc(2 * ${theme.base['hit-area']['finger-min']});
    }
  `;
});
StyledCountTracker.defaultProps = defaultThemeProp;
export const StyledInfo = styled.div(({ theme }) => {
    return css `
    color: ${theme.base.palette.light};
    font-weight: ${theme.base['font-weight']['semi-bold']};

    ${StyledLink} {
      color: inherit;
      text-decoration: underline;
    }
  `;
});
StyledInfo.defaultProps = defaultThemeProp;
export const StyledNavButton = styled(BareButton)(({ theme }) => {
    const bg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.5));
    const hoverBg = tryCatch(() => rgba(theme.base.colors.gray.medium, 0.7));
    const { rtl } = useDirection();
    return css `
    position: absolute;
    z-index: 1;
    inset-block: 0;
    min-width: ${theme.base['hit-area']['mouse-min']};
    color: ${theme.base.palette['foreground-color']};
    box-shadow: none;
    border-radius: 0;

    @media (pointer: coarse) {
      min-width: ${theme.base['hit-area']['finger-min']};
    }

    &[hidden] {
      display: none;
    }

    & > span {
      display: inline-block;
      background-color: ${bg};

      ${StyledIcon} {
        color: ${theme.base.palette.light};
        width: 2rem;
        height: 3rem;

        ${rtl &&
        css `
          transform: rotateZ(180deg);
        `}
      }
    }

    &:nth-of-type(1) {
      inset-inline-start: 0;
      text-align: start;
      & > span {
        border-start-end-radius: calc(${theme.base['border-radius']} / 2);
        border-end-end-radius: calc(${theme.base['border-radius']} / 2);
      }
    }

    &:nth-of-type(2) {
      inset-inline-end: 0;
      text-align: end;
      & > span {
        border-start-start-radius: calc(${theme.base['border-radius']} / 2);
        border-end-start-radius: calc(${theme.base['border-radius']} / 2);
      }
    }

    &:hover > span {
      background-color: ${hoverBg};
    }

    &:focus > span {
      box-shadow: ${theme.base.shadow.focus};
    }
  `;
});
StyledNavButton.defaultProps = defaultThemeProp;
export const StyledContainer = styled.div(({ theme }) => {
    return css `
    button {
      padding: ${theme.base.spacing};
      color: ${theme.base.palette.light};

      &:focus:enabled {
        box-shadow: ${theme.base.shadow.focus};
      }
    }
  `;
});
StyledContainer.defaultProps = defaultThemeProp;
export const StyledMediaContainer = styled.div(({ theme }) => {
    return css `
    position: relative;

    & > div {
      position: absolute;
      inset: 0;
    }

    ${StyledErrorState} {
      margin: auto;
      & > ${StyledText} {
        color: ${theme.base.palette.light};
      }
    }

    img,
    video,
    audio {
      display: block;
      max-width: calc(100% - 5rem);
      max-height: 100%;
      margin: auto;
    }
  `;
});
export const StyledObject = styled.object `
  display: block;
  margin: auto;
  width: calc(100% - 5rem);
  height: 100%;
`;
StyledMediaContainer.defaultProps = defaultThemeProp;
export const StyledPreviewRegion = styled.div `
  position: relative;
  width: 100%;
`;
export const StyledLiveRegion = styled.div `
  ${hideVisually}
`;
export const StyledLightbox = styled(Backdrop)(({ theme }) => {
    return css `
    z-index: ${theme.base['z-index'].max};

    &:focus {
      outline: none;
    }
  `;
});
StyledLightbox.defaultProps = defaultThemeProp;
//# sourceMappingURL=Lightbox.styles.js.map