import { h } from './index-38ad4957.js';
import { j as jn } from './index.module-b23fdad8.js';
import { c as createStyleSheet } from './JSS-67b5cff8.js';
import { g as gap } from './mixins-f750863a.js';

function NavigationSidebarItemView(props) {
  const { states, data, padding = "x-small" } = props;
  const backgroundColor = props.backgroundColor || "var(--sqm-portal-background)";
  const backgroundHoverColor = props.backgroundHoverColor || "var(--sqm-primary-button-background-hover)";
  const backgroundFocusedColor = props.backgroundFocusedColor || "var(--sqm-primary-button-background)";
  const textFocusedColor = props.textFocusedColor || "var(--sqm-primary-button-color)";
  const style = {
    ItemContainer: {
      display: "flex",
      "background-color": `${states.active ? backgroundFocusedColor : backgroundColor}`,
      borderRadius: props.borderRadius
        ? `${props.borderRadius}px`
        : "var(--sqm-border-radius-normal)",
      padding: `var(--sl-spacing-${padding})`,
      "text-decoration": "none",
      color: states.active
        ? textFocusedColor
        : props.textColor || "var(--sqm-text)",
      "align-items": "center",
      ...gap({ direction: "row", size: "var(--sl-font-size-small)" }),
      "&:hover": {
        cursor: "pointer",
        background: states.active
          ? backgroundFocusedColor
          : backgroundHoverColor,
        color: states.active
          ? textFocusedColor
          : props.textHoverColor || "var(--sqm-primary-button-color-hover)",
      },
    },
    Label: {
      margin: "0",
    },
    Icon: {
      "flex-shrink": "0",
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("a", { part: "sqm-link", href: data.path, onClick: (e) => {
      e.preventDefault();
      jn.push(data.path);
    }, class: sheet.classes.ItemContainer },
    h("style", { type: "text/css" }, styleString),
    h("sl-icon", { class: sheet.classes.Icon, name: data.icon }),
    h("p", { class: sheet.classes.Label, part: "sqm-label" }, data.label)));
}

export { NavigationSidebarItemView as N };
