import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { calculateBackgroundAndContrastColor } from '../../styles';
export const StyledPopoverArrow = styled.div `
  background-color: inherit;

  ::before {
    content: '';
    display: block;
    position: absolute;
    inset: -0.25rem;
    background-color: inherit;
    transform: rotate(45deg);
  }
`;
StyledPopoverArrow.defaultProps = defaultThemeProp;
export const StyledPopover = styled.div(({ theme: { base: { 'border-radius': borderRadius, 'z-index': { popover: popoverZIndex, backdrop: backdropZIndex }, shadow: { high }, palette }, components: { card: { background, 'foreground-color': foregroundColor }, 'form-control': { 'border-radius': formControlBorderRadius } } }, portal, offset }) => {
    const { backgroundColor } = calculateBackgroundAndContrastColor(background, foregroundColor);
    return css `
      /*
        Margin should never be used with Popper.
        https://popper.js.org/docs/v2/migration-guide/#4-remove-all-css-margins
      */
      margin: 0 !important;
      z-index: ${portal ? backdropZIndex - 1 : popoverZIndex};
      background: ${backgroundColor};
      border-radius: calc(${formControlBorderRadius} * ${borderRadius});
      box-shadow: ${high};
      color: ${palette['foreground-color']};

      @media (forced-colors: active) {
        border: 0.0625rem solid transparent;
      }

      &[data-popper-reference-hidden='true'] {
        visibility: hidden;
        pointer-events: none;
      }

      &[data-popper-placement^='top'] {
        > ${StyledPopoverArrow} {
          top: calc(100%);

          ::before {
            border-bottom-right-radius: calc(${borderRadius} / 4);
          }
        }

        ::before {
          content: '';
          position: absolute;
          height: ${offset}px;
          bottom: -${offset}px;
          left: 0;
          right: 0;
        }
      }

      &[data-popper-placement^='bottom'] {
        > ${StyledPopoverArrow} {
          bottom: calc(100%);

          ::before {
            border-top-left-radius: calc(${borderRadius} / 4);
          }
        }

        ::before {
          content: '';
          position: absolute;
          height: ${offset}px;
          top: -${offset}px;
          left: 0;
          right: 0;
        }
      }

      &[data-popper-placement^='right'] {
        > ${StyledPopoverArrow} {
          right: calc(100%);

          ::before {
            border-bottom-left-radius: calc(${borderRadius} / 4);
          }
        }

        ::before {
          content: '';
          position: absolute;
          width: ${offset}px;
          left: -${offset}px;
          top: 0;
          bottom: 0;
        }
      }

      &[data-popper-placement^='left'] {
        > ${StyledPopoverArrow} {
          left: calc(100%);

          ::before {
            border-top-right-radius: calc(${borderRadius} / 4);
          }
        }

        ::before {
          content: '';
          position: absolute;
          width: ${offset}px;
          right: -${offset}px;
          top: 0;
          bottom: 0;
        }
      }
    `;
});
StyledPopover.defaultProps = defaultThemeProp;
//# sourceMappingURL=Popover.styles.js.map