"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var styles_exports = {};
__export(styles_exports, {
  StyledItem: () => StyledItem,
  StyledTag: () => StyledTag,
  StyledText: () => StyledText,
  StyledTextContainer: () => StyledTextContainer
});
module.exports = __toCommonJS(styles_exports);
var import_styled_components = __toESM(require("styled-components"));
var import_Tag = __toESM(require("../../../Tag"));
var import_Text = __toESM(require("../../../Text"));
const StyledTextContainer = import_styled_components.default.div`
  ${({
  isSubItem,
  theme: {
    yoga: {
      components: {
        navigationmenu: { border, gap, padding }
      }
    }
  }
}) => import_styled_components.css`
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: ${gap.xxsmall}px;
    padding: 10px ${padding.xxsmall}px 10px ${isSubItem ? 44 : padding.small}px;
    border-radius: ${border.radius.default}px;
  `}
`;
const StyledTag = (0, import_styled_components.default)(import_Tag.default)`
  ${({
  theme: {
    yoga: {
      components: {
        navigationmenu: { backgroundColor, border, tag }
      }
    }
  }
}) => import_styled_components.css`
    background-color: ${backgroundColor.tag};
    border-radius: ${border.radius.tag}px;

    p {
      color: ${tag.color.default};
      text-transform: uppercase;
    }
  `}
`;
const StyledText = (0, import_styled_components.default)(import_Text.default.Body1)`
  ${({
  theme: {
    yoga: {
      components: {
        navigationmenu: { font }
      }
    }
  }
}) => import_styled_components.css`
    color: ${font.color.default};
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  `}
`;
const Active = import_styled_components.css`
  ${({
  theme: {
    yoga: {
      components: {
        navigationmenu: { backgroundColor, icon, font }
      }
    }
  }
}) => import_styled_components.css`
    cursor: auto;

    > ${StyledTextContainer} {
      background-color: ${backgroundColor.active};

      ${StyledText} {
        color: ${font.color.active};
        font-weight: ${font.weight.bold};
      }

      svg {
        fill: ${icon.fill.active};
      }

      > ${StyledTag} {
        background-color: ${backgroundColor.tag};
      }
    }
  `}
`;
const StyledItem = import_styled_components.default.li`
  ${({
  isActive,
  theme: {
    yoga: {
      spacing,
      components: {
        navigationmenu: { backgroundColor, border, icon, font }
      }
    }
  }
}) => import_styled_components.css`
    transition: background-color 300ms ease-in-out;

    background-color: transparent;
    border-radius: ${border.radius.default}px;
    list-style-type: none;
    cursor: pointer;
    margin-right: ${spacing.xxsmall}px;

    svg {
      height: ${icon.height}px;
      width: ${icon.width}px;
    }

    &:hover,
    &:focus {
      ${!isActive && import_styled_components.css`
        background-color: ${backgroundColor.hover};

        ${StyledText} {
          color: ${font.color.hover};
        }

        svg {
          fill: ${icon.fill.hover};
        }
      `};
    }

    a {
      text-decoration: none;

      &:hover,
      &:focus {
        outline: none;

        ${StyledTextContainer} {
          background-color: ${backgroundColor.hover};
          color: ${font.color.hover};
        }

        ${StyledText} {
          color: ${font.color.hover};
        }

        svg {
          fill: ${icon.fill.hover};
        }
      }

      &.active {
        ${Active}
      }

      ${isActive && Active};
    }
  `}
`;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  StyledItem,
  StyledTag,
  StyledText,
  StyledTextContainer
});
