"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Label = exports.AdornmentWrapper = exports.StyledCounter = exports.HiddenInput = exports.Wrapper = void 0;
const Badge_1 = require("@mui/material/Badge");
const Counter_1 = require("../Counter");
const styled_1 = require("../styled");
const Typography_1 = require("../Typography");
const constants_1 = require("./constants");
exports.Wrapper = styled_1.styled.div `
  cursor: pointer;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: ${({ theme }) => theme.spacing(0, 2)};

  background-color: ${({ theme }) => theme.palette.background.default};
  border: 1px solid ${({ theme }) => theme.palette.components.border.default};
  border-radius: ${({ theme }) => theme.shape.medium};

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

  &:hover {
    background-color: ${({ theme }) => theme.palette.background.elementHover};
    border-color: ${({ theme }) => theme.palette.grey[400]};
  }

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

  &.${constants_1.chipClassnames.hasIcon}, 
  &.${constants_1.chipClassnames.hasEndAdornment}:not(.${constants_1.chipClassnames.hasStatusIcon}),
  &.${constants_1.chipClassnames.hasCounter}:not(.${constants_1.chipClassnames.hasStatusIcon}) {
    gap: ${({ theme }) => theme.spacing(1)};
  }

  &.${constants_1.chipClassnames.hasStatusIcon} {
    & .${constants_1.chipClassnames.label} {
      margin-left: ${({ theme }) => theme.microSpacing(1)};
    }

    &.${constants_1.chipClassnames.hasCounter} .${constants_1.chipClassnames.label},
    &.${constants_1.chipClassnames.hasEndAdornment} .${constants_1.chipClassnames.label} {
      margin-right: ${({ theme }) => theme.spacing(1)};
    }
  }

  &.${constants_1.chipClassnames.hasStatusIcon} {
    padding-left: ${({ theme }) => theme.microSpacing(1)};
  }

  &.${constants_1.chipClassnames.sizeSmall} {
    height: ${constants_1.chipSize.small.desktop};

    ${({ theme }) => theme.breakpoints.down('sm')} {
        height: ${constants_1.chipSize.small.mobile};
    }
  }

  &.${constants_1.chipClassnames.sizeMedium} {
    height: ${constants_1.chipSize.medium.desktop};

    ${({ theme }) => theme.breakpoints.down('sm')} {
        height: ${constants_1.chipSize.medium.mobile};
    }
  }

  &.${constants_1.chipClassnames.sizeLarge} {
    height: ${constants_1.chipSize.large.desktop};
    padding: ${({ theme }) => theme.spacing(0, 3)};

    &.${constants_1.chipClassnames.hasStatusIcon} {
      padding-left: ${({ theme }) => theme.spacing(2)};
    }

    ${({ theme }) => theme.breakpoints.down('sm')} {
      height: ${constants_1.chipSize.large.mobile};
    }
  }

  &.${constants_1.chipClassnames.selected} {
    background-color: ${({ theme }) => theme.palette.grey[100]};
    border-color: ${({ theme }) => theme.palette.grey[800]};

    &:hover {
      background-color: ${({ theme }) => theme.palette.background.elementHover};
      border-color: ${({ theme }) => theme.palette.grey[800]};
    }

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

  &.${constants_1.chipClassnames.disabled} {
    cursor: default;

    background-color: ${({ theme }) => theme.palette.components.disabled};
    border-color: transparent;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    mix-blend-mode: luminosity;

    & .${constants_1.chipClassnames.startAdornment},
    & .${constants_1.chipClassnames.endAdornment},
    & .${constants_1.chipClassnames.label} {
      opacity: 0.3;
    }
  }
`;
exports.HiddenInput = styled_1.styled.input `
  position: absolute;

  width: 0;
  height: 0;
`;
exports.StyledCounter = (0, styled_1.styled)(Counter_1.Counter) `
  display: flex;
  align-items: center;

  &::before {
    content: '';

    display: inline-block;

    width: 2px;
    height: 2px;

    /* Сдвигаем точку ниже, чтобы визуально выровнять её по центру строчных букв */
    margin-top: 0.15em;
    margin-right: ${({ theme }) => theme.spacing(1)};

    background-color: ${({ theme }) => theme.palette.grey[800]};
    border-radius: 50%;
  }

  .${Badge_1.badgeClasses.badge} {
    min-width: unset;
    padding: 0;

    font-size: ${({ theme }) => theme.typography.body1.fontSize};
    font-weight: ${({ theme }) => theme.typography.body1.fontWeight};

    ${({ theme }) => theme.breakpoints.down('sm')} {
      font-size: ${({ theme }) => theme.typography.body2.fontSize};
    }
  }
`;
exports.AdornmentWrapper = (0, styled_1.styled)(Typography_1.Typography) `
  display: flex;
  align-items: center;
`;
exports.Label = styled_1.styled.label `
  /* Убираем подсветку при нажатии на компонент */
  -webkit-tap-highlight-color: transparent;

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