const a = {
  /**
   * Styles the root wrapper so the field controls the available width.
   */
  root: () => ({
    display: "inline-flex",
    width: "100%"
  }),
  /**
   * Aligns the custom trailing adornment content inside the text field.
   */
  endAdornment: ({ theme: e }) => ({
    display: "inline-flex",
    alignItems: "center",
    gap: e.vars.size.baseSpacings.sp1
  }),
  /**
   * Sizes only the host popover paper from the anchor width and keeps the picker surface aligned.
   */
  popover: ({ theme: e, ownerState: i }) => ({
    '& > [aria-label="Paper-popover-root"]': {
      width: i?.popoverWidth ? `${i.popoverWidth}px` : "auto",
      minWidth: "230px",
      maxWidth: i?.popoverWidth ? `${i.popoverWidth}px` : "auto",
      padding: e.vars.size.baseSpacings.sp3,
      borderRadius: e.vars.size.borderRadius.r2,
      boxShadow: e.vars.customShadows.z4
    }
  }),
  /**
   * Makes the popover content fill the available picker width.
   */
  content: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp2,
    width: "100%"
  }),
  /**
   * Highlights the current draft value in the popover header.
   */
  summary: ({ theme: e }) => ({
    alignSelf: "flex-end",
    color: e.vars.palette.primary.enabled,
    fontWeight: e.vars.size.typography.weight.bold700
  }),
  /**
   * Stacks the inline period toggle row above the time segment selects.
   */
  inlineLayout: ({ theme: e }) => ({
    display: "flex",
    flexDirection: "column",
    gap: e.vars.size.baseSpacings.sp2,
    width: "100%"
  }),
  /**
   * Keeps the inline AM/PM radios compact and aligned in a single row.
   */
  periodGroup: ({ theme: e }) => ({
    display: "flex",
    alignItems: "center",
    flexWrap: "wrap",
    gap: e.vars.size.baseSpacings["sp2-5"],
    width: "100%"
  }),
  /**
   * Lays out the time segment selects in a single responsive row.
   */
  segments: ({ theme: e }) => ({
    display: "flex",
    alignItems: "center",
    flexWrap: "wrap",
    gap: e.vars.size.baseSpacings.sp1,
    width: "100%"
  }),
  /**
   * Defines the width and centered alignment of each time segment select.
   */
  segmentField: ({ theme: e, ownerState: i }) => ({
    minWidth: "50px",
    flex: "1 1 0",
    "& .M4LSelect-root": {
      width: "100%"
    },
    "& .MuiInputBase-root": {
      width: "100%"
    },
    "& .MuiOutlinedInput-input": {
      textAlign: "center"
    },
    "& .MuiSelect-select": {
      textAlign: "center"
    },
    "& .MuiPaper-root": {
      marginTop: e.vars.size.baseSpacings.sp1
    }
  }),
  /**
   * Keeps the separator visually muted between adjacent time segments.
   */
  separator: ({ theme: e }) => ({
    color: e.vars.palette.text.secondary,
    userSelect: "none"
  }),
  /**
   * Right-aligns the cancel and confirm actions inside the popover footer.
   */
  actionsContainer: ({ theme: e }) => ({
    justifyContent: "flex-end",
    paddingTop: e.vars.size.baseSpacings.sp1
  }),
  actionCancel: () => ({}),
  actionIntro: () => ({})
};
export {
  a as timePickerStyles
};
