import { rgba } from 'polished';
import { styled } from 'styled-components';
import { Box } from '../../atoms/box/index.js';
import { Title } from '../../atoms/typography/index.js';
import { themeGet } from '../../utils/index.js';
export const StyledNavigationElement = styled(Box).withConfig({
  displayName: "navigation-element-styled__StyledNavigationElement",
  componentId: "sc-1qs8qs7-0"
})(["padding:", " ", ";text-decoration:none;color:", ";background-color:transparent;cursor:pointer;border-radius:4px;transition:all 0.1s ease-in;user-select:none;& > *{align-self:center;}& > .icon-box,& > .arrow-box{flex-shrink:0;color:", ";}& > .icon-box{padding-right:", ";}& > ", "{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;", "}", " ", ";"], themeGet('space', 'md', '-1px'), themeGet('space', 'lg'), ({
  theme
}) => theme.colors.text, ({
  theme
}) => theme.colors.grey60, themeGet('space', 'lg'), Title, ({
  isSelected
}) => isSelected && {
  fontWeight: 500
}, ({
  theme,
  isSelected
}) => isSelected && {
  backgroundColor: rgba(theme.colors.primary100, 0.2),
  color: theme.colors.primary100,
  '& > .icon-box': {
    color: 'inherit'
  }
}, ({
  theme,
  isSelected
}) => !isSelected && {
  '&:hover': {
    backgroundColor: rgba(theme.colors.text, 0.2)
  }
});