const a = {
  /**
   * Wrapper para el encabezado del sidebar
   */
  headerContainerComponent: ({ theme: s, ownerState: i }) => ({
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    width: "100%",
    gap: s.vars.size.baseSpacings.sp3,
    paddingLeft: s.vars.size.baseSpacings.sp4,
    paddingRight: s.vars.size.baseSpacings.sp4,
    paddingBottom: s.vars.size.baseSpacings.sp3,
    transition: "all 0.5s",
    "& > div": {
      transition: "all 0.5s"
    },
    ...!i?.anchored && i?.variant !== "host" && {
      transition: "all 0.5s",
      height: s.vars.size.baseSpacings.sp14,
      justifyContent: "center",
      alignItems: "center",
      paddingLeft: s.vars.size.baseSpacings.sp2,
      paddingRight: s.vars.size.baseSpacings.sp2,
      gap: "unset",
      "& > div:not(.M4LSideBar-buttonAnchored)": {
        visibility: "hidden",
        transition: "all 0.5s"
      }
    }
  }),
  /**
   * Styles applied to the button anchored in the header component
   */
  buttonAnchored: {}
};
export {
  a as headerComponentStyles
};
