import styled, { css } from "styled-components";
import { IconButton } from "../IconButton";
import { ArrowDownLongIcon, ArrowUpLongIcon, SortGeneralIcon } from "../Icons";
import { List, ListItem } from "../List";
import { ValueButton } from "../ValueButton";
export const StyledSortWrapper = styled.div.withConfig({
  displayName: "Styles__StyledSortWrapper",
  componentId: "sc-11r5ac9-0"
})(["", ";"], {
  "width": "fit-content"
});
StyledSortWrapper.displayName = "StyledSortWrapper";
export const StyledValueButton = styled(ValueButton).withConfig({
  displayName: "Styles__StyledValueButton",
  componentId: "sc-11r5ac9-1"
})(["", ";"], {
  "display": "none",
  "alignItems": "center",
  "@media (min-width: 768px)": {
    "display": "flex"
  }
});
StyledValueButton.displayName = "StyledValueButton";
export const StyledIconButton = styled(IconButton).withConfig({
  displayName: "Styles__StyledIconButton",
  componentId: "sc-11r5ac9-2"
})(["", ";"], {
  "display": "flex",
  "alignItems": "center",
  ":hover": {
    "color": "var(--color-primary)"
  },
  "@media (min-width: 768px)": {
    "display": "none"
  }
});
StyledIconButton.displayName = "StyledIconButton";
export const StyledSortIcon = styled(SortGeneralIcon).withConfig({
  displayName: "Styles__StyledSortIcon",
  componentId: "sc-11r5ac9-3"
})(["", ";"], {
  "marginTop": "0px"
});
StyledSortIcon.displayName = "StyledSortIcon";
export const StyledSortIconDown = styled(ArrowDownLongIcon).withConfig({
  displayName: "Styles__StyledSortIconDown",
  componentId: "sc-11r5ac9-4"
})(["", ";"], {
  "flexShrink": "0"
});
StyledSortIconDown.displayName = "StyledSortIconDown";
export const StyledSortIconUp = styled(ArrowUpLongIcon).withConfig({
  displayName: "Styles__StyledSortIconUp",
  componentId: "sc-11r5ac9-5"
})(["", ";"], {
  "flexShrink": "0"
});
StyledSortIconUp.displayName = "StyledSortIconUp";
export const StyledList = styled(List).withConfig({
  displayName: "Styles__StyledList",
  componentId: "sc-11r5ac9-6"
})(["", ";"], {
  "paddingTop": "0.5rem",
  "paddingBottom": "0.5rem"
});
StyledList.displayName = "StyledList";
export const StyledListItem = styled(ListItem).withConfig({
  displayName: "Styles__StyledListItem",
  componentId: "sc-11r5ac9-7"
})(["", ";svg{visibility:hidden;}&:hover svg{fill:var(--color-theme-500);visibility:visible;}", ""], {
  "justifyContent": "space-between"
}, props => props.$active && css(["", ";svg{fill:var(--color-primary);visibility:visible;}&:hover svg{fill:var(--color-primary);visibility:visible;}"], {
  "color": "var(--color-primary)"
}));
StyledListItem.displayName = "StyledListItem";
export const StyledListItemName = styled.span.withConfig({
  displayName: "Styles__StyledListItemName",
  componentId: "sc-11r5ac9-8"
})(["", ";"], {
  "overflow": "hidden",
  "textOverflow": "ellipsis",
  "whiteSpace": "nowrap"
});
StyledListItemName.displayName = "StyledListItemName";
//# sourceMappingURL=Styles.js.map