import { buildThemedStyles } from "../../AtlantisThemeContext";

export const useStyles = buildThemedStyles(tokens => ({
  content: {
    flex: 1,
    justifyContent: "center",
  },

  // Inside-label placement: the Value's flex fills the column vertically and
  // would otherwise pin the label flush to the top. This top inset gives the
  // label the same breathing room as the shared input chrome's mini-label.
  contentInside: {
    paddingTop: tokens["space-small"] - tokens["space-smallest"],
  },

  // Static read-only surface — mirrors the trigger shape with a subtle fill, no chevron.
  readOnly: {
    flexDirection: "row",
    alignItems: "center",
    gap: tokens["space-small"],
    minHeight: tokens["space-largest"] + tokens["space-small"],
    paddingLeft: tokens["space-base"],
    paddingRight: tokens["space-small"],
    backgroundColor: tokens["color-surface--background--subtle"],
    borderWidth: tokens["border-base"],
    borderColor: tokens["color-border"],
    borderRadius: tokens["radius-base"],
  },
}));