"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Wrapper = void 0;
const FormControl_1 = require("@mui/material/FormControl");
const InputBase_1 = require("@mui/material/InputBase");
const OutlinedInput_1 = require("@mui/material/OutlinedInput");
const SvgIcon_1 = require("../../components/SvgIcon");
const styled_1 = require("../../components/styled");
const constants_1 = require("./constants");
exports.Wrapper = styled_1.styled.div `
  min-width: ${({ $width }) => $width || constants_1.DEFAULT_SEARCH_FIELD_WIDTH};

  ${({ theme }) => theme.breakpoints.between('sm', 'laptop')} {
    overflow: hidden;

    width: ${({ $width }) => $width || constants_1.DEFAULT_SEARCH_FIELD_WIDTH};
    min-width: unset;

    transition: ${({ theme }) => theme.transitions.create(['width', 'padding'], {
    duration: theme.transitions.duration.shorter,
    easing: theme.transitions.easing.easeInOut,
    delay: theme.transitions.duration.shorter,
})};

    .${FormControl_1.formControlClasses.root} {
      display: flex;
      flex-direction: row-reverse;

      width: 100%;
      min-width: 32px;
    }

    .${OutlinedInput_1.outlinedInputClasses.root} {
      transition: ${({ theme }) => theme.transitions.create(['width', 'padding'], {
    duration: theme.transitions.duration.shorter,
    easing: theme.transitions.easing.easeInOut,
    delay: theme.transitions.duration.shorter,
})};
    }

    .${SvgIcon_1.svgIconClassnames.root} {
      transition: ${({ theme }) => theme.transitions.create(['fill'], {
    duration: theme.transitions.duration.shorter,
    easing: theme.transitions.easing.easeInOut,
    delay: theme.transitions.duration.shorter,
})};
    }

    &:not(:hover, :focus-within):not(.${constants_1.formFiltersSearchFieldClassnames.hasValue}) {
      width: 32px;

      .${SvgIcon_1.svgIconClassnames.root} {
        fill: ${({ theme }) => theme.palette.grey[800]};
      }

      .${OutlinedInput_1.outlinedInputClasses.root} {
        padding: ${({ theme }) => theme.microSpacing(1, 3)};
      }

      .${InputBase_1.inputBaseClasses.input} {
        width: 0;
        min-width: 0;
      }
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    width: 100%;
  }
`;
