import { defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';

var dropdownCss = function dropdownCss(theme) {
  return _defineProperty({
    background: theme.colors.primaryBackground,
    border: "1px solid ".concat(theme.colors.grey[10]),
    borderRadius: theme.radii[3],
    outline: "none",
    boxShadow: theme.shadows.floating,
    transformOrigin: "50% top",
    overflow: "auto",
    maxHeight: "20rem",
    // @TODO port to `Combobox` — providing this bit of vertical padding
    // aligns the first and last action items' visual size with the rest of the
    // dropdown items
    paddingTop: theme.space[3],
    paddingBottom: theme.space[3],
    // @TODO consider reserving purple background for `active` (CSS) and
    // `selected` states only — `hover` background could be light grey instead
    "[data-selected]": {
      background: theme.colors.purple[10],
      color: theme.colors.gatsby
    }
  }, theme.mediaQueries.phablet, {});
};
var dropdownSizeCss = {
  AUTO: function AUTO(_theme) {
    return {};
  },
  MAX_CONTENT: function MAX_CONTENT(_theme) {
    return {
      width: "max-content"
    };
  },
  LEGACY: function LEGACY(theme) {
    return _defineProperty({
      width: "max-content"
    }, theme.mediaQueries.phablet, {
      width: "80vw",
      maxWidth: "20rem"
    });
  }
};
var menuItemCss = function menuItemCss(theme) {
  return {
    cursor: "pointer",
    color: theme.colors.grey[90],
    fontSize: theme.fontSizes[1],
    // @TODO consider bumping horizontal, decrease vertical padding;
    // same goes for `Combobox`
    padding: "".concat(theme.space[4], " ").concat(theme.space[5]),
    lineHeight: theme.lineHeights["default"],
    overflow: "hidden",
    wordWrap: "break-word",
    overflowWrap: "break-word",
    hyphens: "auto",
    display: "block",
    textDecoration: "none"
  };
};
var dropdownButtonCss = function dropdownButtonCss(theme) {
  return {
    cursor: "pointer",
    display: "flex",
    alignItems: "center",
    border: "1px solid ".concat(theme.colors.grey[30]),
    borderRadius: theme.radii[2],
    color: theme.colors.grey[90],
    fontSize: theme.fontSizes[2],
    padding: "".concat(theme.space[2], " ").concat(theme.space[4]),
    width: "100%",
    "&:focus": {
      borderColor: theme.colors.purple[40],
      boxShadow: "0 0 0 3px ".concat(theme.colors.purple[20]),
      outline: 0,
      transition: "box-shadow 0.15s ease-in-out"
    }
  };
};
var dropdownButtonIconCss = function dropdownButtonIconCss(_theme) {
  return {
    marginInlineStart: "auto",
    transition: "transform .3s",
    "[aria-expanded] > &": {
      transform: "rotate(180deg)"
    }
  };
};
var dropdownDividerCss = function dropdownDividerCss(theme) {
  return {
    // we're applying this to `hr`
    border: 0,
    borderTop: "1px solid ".concat(theme.colors.grey[20]),
    marginBottom: theme.space[3],
    marginTop: theme.space[3]
  };
};
var dropdownHeaderCss = function dropdownHeaderCss(theme) {
  return {
    color: theme.colors.grey[50],
    fontFamily: theme.fonts.sans,
    fontSize: theme.fontSizes[0],
    fontWeight: theme.fontWeights.semiBold,
    margin: 0,
    padding: "".concat(theme.space[4], " ").concat(theme.space[5])
  };
};

export { dropdownButtonCss, dropdownButtonIconCss, dropdownCss, dropdownDividerCss, dropdownHeaderCss, dropdownSizeCss, menuItemCss };
//# sourceMappingURL=DropdownMenu.styles.esm.js.map
