import { badgeClasses } from '@mui/material/Badge';
import { tooltipClasses } from '@mui/material/Tooltip';
import { Badge } from '../../../components/Badge';
import { buttonClassnames } from '../../../components/Button/constants';
import { Counter } from '../../../components/Counter';
import { styled } from '../../../components/styled';
import { Tooltip } from '../../../components/Tooltip';
import { formFiltersClassnames } from '../constants';
export const AllFiltersButtonWrapper = styled.div `
  display: none;

  white-space: nowrap;

  &.${formFiltersClassnames.showAllFiltersButtonOnDesktop} {
    display: flex;
  }

    ${({ theme }) => theme.breakpoints.between('sm', 'laptop')} {
    &.${formFiltersClassnames.showAllFiltersButtonOnLaptop} {
      display: flex;
    }

    .${formFiltersClassnames.allFiltersButton} {
      padding: ${({ theme }) => theme.microSpacing(0, 3)};

      font-size: 0;

      &.${buttonClassnames.root} {
        gap: 0;
      }
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    margin-right: 0;
    &.${formFiltersClassnames.showAllFiltersButtonOnMobile} {
      display: flex;
    }

    &.${formFiltersClassnames.withoutSearch} {
      width: 100%;

      .${formFiltersClassnames.allFiltersButton} {
        width: 100%;
      }
    }

    &.${formFiltersClassnames.withSearch} {
      .${formFiltersClassnames.allFiltersButton} {
         display: unset;
         gap: 0;

         padding: 8px;

         font-size: 0;
      }
    }
  }
`;
export const StyledTooltip = styled(Tooltip) `
  & .${tooltipClasses.tooltip} {
    ${({ theme }) => theme.breakpoints.up('laptop')} {
      display: none;
    }
  }
`;
export const StyledBadge = styled(Badge) `
   width: 100%;

  .${badgeClasses.dot} {
     top: ${({ theme }) => theme.spacing(1)};
     right: ${({ theme }) => theme.spacing(1)};

      ${({ theme }) => theme.breakpoints.up('laptop')} {
        display: none;
      }
    }
`;
export const StyledCounter = styled(Counter) `
  ${({ theme }) => theme.breakpoints.down('laptop')} {
    display: none;
  }
`;
