import { styled } from '../../styled';
import { sidebarPopoverItemClassnames } from './constants';
export const Item = styled.div `
  pointer-events: ${({ $isDisabled }) => ($isDisabled ? 'none' : 'auto')};

  opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
  background-color: ${({ theme }) => theme.palette.background.default};
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  mix-blend-mode: ${({ $isDisabled }) => $isDisabled ? 'luminosity' : 'normal'};

  transition: ${({ theme }) => {
    return theme.transitions.create(['background-color'], {
        duration: theme.transitions.duration.short,
    });
}};

  &:hover {
    background-color: ${({ theme }) => theme.palette.background.elementHover};
  }

  &:active {
    background-color: ${({ theme }) => theme.palette.primary[100]};
  }

  /* Причина игнора: Не критично для отображения */
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
  &:has(.${sidebarPopoverItemClassnames.content}:focus-visible) {
    border-radius: ${({ theme }) => theme.shape.small};
    outline: 2px solid ${({ theme }) => theme.palette.components.focused};
    outline-offset: -2px;
  }

  a {
    all: unset;
  }
`;
export const Wrapper = styled.div `
  cursor: pointer;

  display: flex;
  gap: ${({ theme }) => theme.spacing(2)};
  align-items: ${({ $hasDescription }) => $hasDescription ? 'normal' : 'center'};

  padding: ${({ theme }) => theme.spacing(3, 4)};
`;
export const IconWrapper = styled.div `
  height: 32px;
  padding: ${({ theme }) => theme.microSpacing(1, 0)};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const ItemWrapper = styled.div `
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(1)};
`;
