const i = (t) => {
  const { spacing: e, color: n } = t;
  return {
    ".nav-bar": {
      width: "100%",
      borderBottomWidth: "1px",
      borderColor: n("divider.medium"),
      backgroundColor: n("brand.white"),
      height: "68px",
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      paddingLeft: e(6),
      paddingRight: e(6),
      "@screen desktop": {
        paddingLeft: e(24),
        paddingRight: e(24)
      }
    },
    ".nav-bar .link": {
      fontWeight: 600,
      color: n("brand.black"),
      textDecoration: "none",
      display: "flex",
      alignItems: "center",
      gap: e(1)
    },
    ".nav-bar .hide": {
      display: "inherit",
      "&.desktop": {
        "@screen desktop": {
          display: "none"
        }
      },
      "&.tablet": {
        "@screen mobile": {
          display: "none"
        }
      },
      "&.mobile": {
        "@screen mobile": {
          display: "none"
        }
      }
    },
    ".nav-bar .icon-button": {
      width: e(12),
      height: e(12),
      justifyContent: "center",
      alignItems: "center"
    },
    ".nav-bar .show": {
      display: "none",
      "&.desktop": {
        "@screen desktop": {
          display: "inherit"
        }
      },
      "&.tablet": {
        "@screen mobile": {
          display: "inherit"
        }
      },
      "&.mobile": {
        "@screen mobile": {
          display: "inherit"
        }
      }
    }
  };
}, o = {
  getComponents: i
};
export {
  o as TailwindNavBarComponents
};
