import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { calculateFontSize } from '../../styles';
import { Status } from '../Badges';
export const StyledLocationError = styled(Status) `
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
`;
StyledLocationError.defaultProps = defaultThemeProp;
export const StyledLocationView = styled.div(({ $height, theme }) => {
    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
    return css `
    min-height: inherit;
    height: ${$height};
    position: relative;
    flex: auto;
    border-radius: ${theme.base['border-radius']};
    mask-image: radial-gradient(white, black);
    -webkit-mask-image: radial-gradient(white, black);

    div.gm-style-iw.gm-style-iw-c .gm-style-iw-chr {
      font-size: ${fontSize.s};
      font-weight: ${theme.base['font-weight']['semi-bold']};
    }

    div.gm-style-iw.gm-style-iw-c div.gm-style-iw-d {
      overflow: auto !important;
    }

    div.gm-style-iw.gm-style-iw-c {
      display: flex;
      font-family: ${theme.base['font-family']};
      min-width: min(${theme.base['content-width'].sm}, calc(100vw - 2rem)) !important;
      background-color: ${theme.components.card.background};
      border-radius: calc(
        ${theme.components['form-control']['border-radius']} * ${theme.base['border-radius']}
      );
      padding: calc(2 * ${theme.base.spacing}) !important;
      > button {
        opacity: 1;
        position: relative !important;
        z-index: calc(${theme.base['z-index'].backdrop} + 1);
        top: 0 !important;
        right: 0 !important;
        align-self: end;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: ${theme.base['hit-area']['mouse-min']} !important;
        height: ${theme.base['hit-area']['mouse-min']} !important;
        border: ${theme.components.button['border-width']} solid transparent !important;
        border-radius: calc(
          ${theme.base['border-radius']} * ${theme.components.button['border-radius']}
        );
        color: currentColor;

        > span {
          margin: 0 !important;
          height: 1.25rem !important;
          width: 1.25rem !important;
        }

        &:active {
          translate: 0 0.0625rem;
        }

        &:enabled:focus,
        &:not([disabled]):focus {
          box-shadow: ${theme.components.button['focus-shadow']};
        }

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

        @media (hover: hover) {
          &:hover::before {
            content: '';
            position: absolute;
            inset: calc(${theme.components.button['border-width']} * -1);
            border-radius: inherit;
            background-color: currentColor;
            color: currentColor;
            opacity: 0.1;
          }

          &:active::before {
            content: '';
            position: absolute;
            inset: calc(${theme.components.button['border-width']} * -1);
            border-radius: inherit;
            background-color: currentColor;
            opacity: 0.2;
          }
        }
      }
    }
  `;
});
StyledLocationView.defaultProps = defaultThemeProp;
export const StyledMap = styled.div(({ disabled, status, theme: { base: { 'disabled-opacity': disabledOpacity } } }) => {
    return css `
      position: absolute;
      inset: 0;

      ${disabled &&
        css `
        opacity: ${disabledOpacity};
      `}

      ${status === 'error' &&
        css `
        opacity: ${disabledOpacity};
      `}
    `;
});
StyledMap.defaultProps = defaultThemeProp;
//# sourceMappingURL=LocationView.styles.js.map