"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledSelect = exports.Placeholder = exports.EndAdornmentWrapper = exports.StateWrapper = void 0;
const Select_1 = __importDefault(require("@mui/material/Select"));
const Loader_1 = require("../Loader");
const MenuItem_1 = require("../MenuItem");
const styled_1 = require("../styled");
const Tag_1 = require("../Tag");
exports.StateWrapper = styled_1.styled.div `
  display: flex;
  align-items: center;
  justify-content: center;

  height: 56px;
`;
exports.EndAdornmentWrapper = styled_1.styled.div `
  display: flex;
  align-items: center;

  margin-left: auto;
  
  .${Loader_1.loaderClassnames.root} {
    margin-right: ${({ theme }) => theme.microSpacing(3)};
  }
`;
exports.Placeholder = (0, styled_1.styled)(MenuItem_1.MenuItem) `
  display: none;
`;
exports.StyledSelect = (0, styled_1.styled)(Select_1.default, {
    shouldForwardProp: (prop) => !['$isShowingPlaceholder'].includes(prop),
}) `
  padding-right: ${({ theme }) => theme.spacing(2)};

  color: ${({ $isShowingPlaceholder, theme }) => $isShowingPlaceholder ? theme.palette.grey[500] : 'unset'};

  .MuiSelect-select.MuiSelect-outlined {
    min-height: 20px;

    line-height: 20px;
  }
  
  & :not(.${Tag_1.tagClassnames.root}) > .MuiButton-root {
    width: 20px;
    height: 20px;
    margin-right: ${({ theme }) => theme.spacing(1)};

    border-radius: ${({ theme }) => theme.shape.small};

    ${({ theme }) => theme.breakpoints.down('sm')} {
      width: 24px;
      height: 24px;
    }
  }
`;
