import styled from "styled-components";
import { screen } from "../BreakPoints";
import { FontStyle } from "../FontStyle";
import { SpinnerLoader } from "../Loaders";
export const StyledCommandPalette = styled.div.withConfig({
  displayName: "CommandPalettestyles__StyledCommandPalette",
  componentId: "sc-na3mad-0"
})(["", " background-color:var(--page-paper-main);border-radius:10px;box-sizing:border-box;max-width:600px;mark{background-color:var(--color-primary-300);color:var(--color-theme-900);}"], FontStyle);
export const StyledCommandPaletteWrapper = styled.div.withConfig({
  displayName: "CommandPalettestyles__StyledCommandPaletteWrapper",
  componentId: "sc-na3mad-1"
})(["overflow-x:hidden;overflow-y:auto;max-height:450px;&:not(:empty){border-top:1px solid var(--color-theme-400);padding-bottom:8px;padding-top:8px;}"]);
export const StyledCommandPaletteHeader = styled.div.withConfig({
  displayName: "CommandPalettestyles__StyledCommandPaletteHeader",
  componentId: "sc-na3mad-2"
})(["align-items:center;display:flex;padding-bottom:12px;padding-left:16px;padding-right:16px;padding-top:12px;"]);
export const StyledSearchIcon = styled.div.withConfig({
  displayName: "CommandPalettestyles__StyledSearchIcon",
  componentId: "sc-na3mad-3"
})(["margin-right:8px;svg{vertical-align:middle;}"]);
export const StyledInput = styled.input.withConfig({
  displayName: "CommandPalettestyles__StyledInput",
  componentId: "sc-na3mad-4"
})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type=\"search\"]::-webkit-search-decoration,&[type=\"search\"]::-webkit-search-cancel-button,&[type=\"search\"]::-webkit-search-results-button,&[type=\"search\"]::-webkit-search-results-decoration{-webkit-appearance:none;}&[type=\"number\"]{-moz-appearance:textfield;}::placeholder{color:var(--color-theme-transparent-500);}::selection{background:var(--color-primary-300);}"], screen.sm);
export const StyledParameter = styled.span.withConfig({
  displayName: "CommandPalettestyles__StyledParameter",
  componentId: "sc-na3mad-5"
})(["color:var(--color-theme-transparent-500);margin-right:8px;flex-shrink:0;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}"], screen.sm);
export const StyledActionWrapper = styled.div.withConfig({
  displayName: "CommandPalettestyles__StyledActionWrapper",
  componentId: "sc-na3mad-6"
})(["align-items:center;display:flex;gap:8px;"]);
export const StyledIcon = styled.div.withConfig({
  displayName: "CommandPalettestyles__StyledIcon",
  componentId: "sc-na3mad-7"
})(["margin-right:8px;svg{vertical-align:middle;}"]);
export const StyledCommandPaletteList = styled.ul.withConfig({
  displayName: "CommandPalettestyles__StyledCommandPaletteList",
  componentId: "sc-na3mad-8"
})(["list-style-type:none;margin:0;padding:0;overflow:hidden;&:not(:first-child){border-top:1px solid var(--color-theme-400);}"]);
export const StyledHeading = styled.p.withConfig({
  displayName: "CommandPalettestyles__StyledHeading",
  componentId: "sc-na3mad-9"
})(["font-size:12px;margin-top:12px;margin-bottom:4px;font-weight:bold;padding-left:18px;letter-spacing:0.5px;color:var(--color-theme-600);"]);

// prettier-ignore
export const StyledCommandPaletteItem = styled.a.withConfig({
  displayName: "CommandPalettestyles__StyledCommandPaletteItem",
  componentId: "sc-na3mad-10"
})(["align-items:center;cursor:pointer;display:flex;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;position:relative;background-color:", ";&:focus{background-color:var(--color-theme-200);}&::before{display:", ";background-color:var(--color-primary);content:\"\";height:100%;left:0;position:absolute;width:2px;}&:focus{outline:none;}"], _ref => {
  let {
    $selected
  } = _ref;
  return $selected ? "var(--color-theme-200)" : "transparent";
}, _ref2 => {
  let {
    $selected
  } = _ref2;
  return $selected ? "block" : "none";
});
export const StyledCommandPaletteCommandItem = styled(StyledCommandPaletteItem).withConfig({
  displayName: "CommandPalettestyles__StyledCommandPaletteCommandItem",
  componentId: "sc-na3mad-11"
})(["user-select:none;"]);
export const StyledSpinnerLoader = styled(SpinnerLoader).withConfig({
  displayName: "CommandPalettestyles__StyledSpinnerLoader",
  componentId: "sc-na3mad-12"
})(["margin-right:4px;"]);
export const StyledCommandPaletteItemLoader = styled.div.withConfig({
  displayName: "CommandPalettestyles__StyledCommandPaletteItemLoader",
  componentId: "sc-na3mad-13"
})(["align-items:center;display:flex;gap:8px;padding-bottom:12px;padding-left:18px;padding-right:18px;padding-top:12px;pointer-events:none;user-select:none;"]);
//# sourceMappingURL=CommandPalette.styles.js.map