import { theme, Tag as T } from "@local-logic/core/ui";
import { styled } from "styled-components";

export const List = styled.ul`
  list-style: none;
  padding: 0;
  margin-bottom: 0;
`;

export const Item = styled.li<{ $isActive: boolean; $isHovered: boolean }>`
  cursor: default;
  padding: ${theme["--ll-spacing-x-small"]};
  margin-bottom: ${theme["--ll-spacing-xx-small"]};
  border-radius: ${theme["--ll-border-radius-small"]};
  background-color: ${({ $isActive, $isHovered }) => {
    if ($isActive || $isHovered) {
      return theme["--ll-color-surface-variant1"];
    }

    return theme["--ll-color-background"];
  }};
`;

export const RouteContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
`;

export const Tag = styled(T)`
  margin-right: 2px;
  margin-bottom: 2px;
`;