import styled, { css } from 'styled-components';
import { hideVisually } from 'polished';
import { StyledKeyboard } from '../Badges/Keyboard';
import { StyledButtonLink } from '../Button';
import Popover from '../Popover';
import { defaultThemeProp } from '../../theme';
export const StyledLinkWithShortcut = styled.div `
  display: flex;
  gap: 0.5rem;

  ${StyledKeyboard} {
    /* reset position applied in Keyboard badge to align vertically with link */
    inset-block-start: 0;
  }
`;
export const StyledSkipLinksItems = styled.div `
  & > ${StyledButtonLink} {
    display: block;
    margin-inline-start: 0;
  }
`;
export const StyledSkipLinks = styled(Popover)(props => {
    const { theme: { base: { spacing, 'z-index': zIndices } } } = props;
    return css `
    position: fixed;
    z-index: ${zIndices.max};
    overflow: auto;
    max-width: calc(100vw - 6 * ${spacing});
    max-height: calc(100vh - 6 * ${spacing});

    &:not(:focus-within) {
      z-index: -1;
      ${hideVisually}
    }
  `;
});
StyledSkipLinks.defaultProps = defaultThemeProp;
export const StyledShortcuts = styled.div(({ theme }) => {
    return css `
    border-block-start: 0.0625rem solid ${theme.base.palette['border-line']};

    [role='listitem'] {
      display: contents;
    }
  `;
});
StyledShortcuts.defaultProps = defaultThemeProp;
export const StyledSkipLinksWrapper = styled.div(({ theme: { base: { spacing } } }) => {
    return css `
      ${StyledSkipLinks} {
        &:not(:focus-within) {
          clip: unset;
          height: auto;
          padding: ${spacing};
          width: auto;
        }
      }
    `;
});
StyledSkipLinksWrapper.defaultProps = defaultThemeProp;
//# sourceMappingURL=SkipLinks.styles.js.map