import styled, { css } from 'styled-components';
import { defaultThemeProp } from '../../theme';
import { animations } 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, animation }, components: { 'form-control': { 'border-radius': formControlBorderRadius }, popover: { background: popoverBackground } } }, portal, offset }) => {
    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: ${popoverBackground};
      border-radius: calc(${formControlBorderRadius} * ${borderRadius});
      box-shadow: ${high};
      color: ${palette['foreground-color']};
      ${animations.subProperties}
      --scale-in-size: 1;
      --animation-duration: calc(2 * ${animation.speed});

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

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

      &[data-popper-placement^='top'] {
        transform-origin: center bottom;
        animation-name: ${animations.reveal}, ${animations.slideInYEnd}, ${animations.scaleIn};

        > ${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'] {
        transform-origin: center top;
        animation-name: ${animations.reveal}, ${animations.slideInYStart}, ${animations.scaleIn};

        > ${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'] {
        transform-origin: left center;
        animation-name: ${animations.reveal}, ${animations.slideInXStart}, ${animations.scaleIn};

        > ${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'] {
        transform-origin: right center;
        animation-name: ${animations.reveal}, ${animations.slideInXEnd}, ${animations.scaleIn};

        > ${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