"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SidebarButton = void 0;
const Button_1 = require("../Button");
const styled_1 = require("../styled");
exports.SidebarButton = (0, styled_1.styled)(Button_1.Button, {
    shouldForwardProp: (prop) => !['$isOpen'].includes(prop),
}) `
  min-width: ${({ $isOpen }) => (!$isOpen ? '40px' : '100%')};
  max-width: ${({ $isOpen }) => (!$isOpen ? '40px' : '100%')};
  height: 40px;
  max-height: 40px;
  margin-bottom: 0;

  text-overflow: ellipsis;
  white-space: nowrap;

  transition: ${({ theme }) => {
    return theme.transitions.create(['max-width', 'min-width'], {
        duration: theme.transitions.duration.standard,
    });
}};

  ${({ theme }) => theme.breakpoints.down('sm')} {
    height: 48px;
    max-height: 48px;
  }

  && > .MuiButton-startIcon {
    margin-right: ${({ theme, $isOpen }) => !$isOpen ? theme.spacing(-2) : theme.spacing(0)};

    transition: ${({ theme }) => {
    return theme.transitions.create('margin-right', {
        duration: theme.transitions.duration.standard,
    });
}};
  }

  && > .MuiButton-endIcon {
    margin-right: ${({ theme, $isOpen }) => !$isOpen ? theme.spacing(2) : theme.spacing(0)};

    transition: ${({ theme }) => {
    return theme.transitions.create('margin-right', {
        duration: theme.transitions.duration.standard,
    });
}};
  }
`;
