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

export const RouteContainer = styled.div<{
  justify?: "start" | "center" | "end" | "space-between" | "space-around";
}>`
  display: flex;
  margin-bottom: ${theme["--ll-spacing-xx-small"]};
  align-items: center;
  justify-content: ${({ justify }) => justify || "start"};
`;

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

export const SchoolTextContainer = styled.div`
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 10px;
  margin-bottom: ${theme["--ll-spacing-xx-small"]};
`;

export const Content = styled(Popover.Content)`
  z-index: 20;
`;

export const SchoolText = styled(Text)``;