"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledPopover = exports.StyledTypography = exports.OrganizationData = exports.OrganizationsWrapper = exports.SearchWrapper = exports.ActionWrapper = void 0;
const BottomDrawer_1 = require("../BottomDrawer");
const constants_1 = require("../BottomDrawer/constants");
const Grid_1 = require("../Grid");
const Popover_1 = require("../Popover");
const LoadingPlaceholder_1 = require("../placeholders/LoadingPlaceholder");
const Placeholder_1 = require("../placeholders/Placeholder");
const styled_1 = require("../styled");
const Typography_1 = require("../Typography");
const constants_2 = require("./constants");
exports.ActionWrapper = styled_1.styled.div `
  padding: ${({ theme }) => theme.spacing(2)};

  border-top: 1px solid ${({ theme }) => theme.palette.components.border.default};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    padding: ${({ theme }) => theme.spacing(4)};
  }
`;
exports.SearchWrapper = styled_1.styled.div `
  max-width: 300px;
  padding: ${({ theme }) => theme.spacing(2, 3)};

  border-bottom: ${({ theme }) => `1px solid ${theme.palette.components.border.default}`};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    max-width: unset;
    padding: ${({ theme }) => theme.spacing(3, 4)};
  }
`;
exports.OrganizationsWrapper = styled_1.styled.div `
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  box-sizing: ${({ $isLoading }) => ($isLoading ? 'content-box' : 'inherit')};
  width: 300px;
  min-height: ${({ $isLoading }) => ($isLoading ? constants_2.PLACEHOLDER_HEIGHT : '64px')};
  max-height: 328px;

  & .${constants_2.menuOrganizationClassnames.errorPlaceholder} {
    display: flex;
    gap: ${({ theme }) => theme.spacing(1)};

    height: ${constants_2.PLACEHOLDER_HEIGHT};
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 100%;
    height: 100%;
    max-height: unset;

    & .${LoadingPlaceholder_1.loadingPlaceholderClassnames.root} {
      justify-content: unset;
    }

    & .${constants_2.menuOrganizationClassnames.errorPlaceholder} {
      gap: ${({ theme }) => theme.spacing(6)};
      justify-content: center;

      height: 100%;

      & .${Placeholder_1.placeholderClassnames.title} {
        margin-bottom: unset;
      }

      & .${Placeholder_1.placeholderClassnames.footer} {
        margin-top: unset;
      }
    }
  }
`;
exports.OrganizationData = (0, styled_1.styled)(Grid_1.Grid) `
  display: flex;
  gap: ${({ theme }) => theme.spacing(2)};

  padding-top: ${({ theme }) => theme.spacing(1)};
`;
exports.StyledTypography = (0, styled_1.styled)(Typography_1.Typography) `
  color: ${({ theme }) => theme.palette.grey[600]};
`;
exports.StyledPopover = (0, styled_1.styled)(Popover_1.Popover) `

  ${({ theme }) => theme.breakpoints.down('sm')} {
    & .${BottomDrawer_1.bottomDrawerClassnames.content} {
      display: flex;
      flex-direction: column;

      height: calc(100vh - ${constants_1.OFFSET_TOP_SCREEN});

      /* Причина игнора: прогрессивное улучшение */
      /* stylelint-disable plugin/no-unsupported-browser-features */
      @supports (height: 100dvh) {
        height: calc(100dvh - ${constants_1.OFFSET_TOP_SCREEN});
      }
      /* stylelint-enable plugin/no-unsupported-browser-features */
    }
  }

`;
