import styled from "styled-components";
export const Container = styled.header `
  width: 100%;
  height: 70px;
  z-index: 98;
  position: fixed;
  top: 0;

  background: ${({ theme }) => theme.new?.navigation?.containerBackground ?? "unset"};
  box-shadow: ${({ theme }) => theme.new?.navigation?.containerBoxShadow ?? "unset"};
  border-radius: ${({ theme }) => theme.new?.navigation?.containerBorderRadius ?? "unset"};
  border: ${({ theme }) => theme.new?.navigation?.containerBorder ?? "unset"};

  @media (max-width: 1023px) {
    height: 48px;
    box-shadow: unset;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: unset;
  }
`;
export const Content = styled.div `
  width: calc(100% - 32px * 2);
  max-width: 1096px;
  height: 100%;
  margin: 0 auto;
  padding: 8px 0;

  display: flex;
  justify-content: flex-start;
  align-items: center;

  a {
    max-height: 100%;
  }

  @media (max-width: 1023px) {
    width: calc(100% - 20px * 2);
  }
`;
export const Space = styled.div `
  content: "";
  margin-top: ${({ top }) => top ?? "0"};
  margin-bottom: ${({ bottom }) => bottom ?? "0"};
  margin-left: ${({ left }) => left ?? "0"};
  margin-right: ${({ right }) => right ?? "0"};
`;
export const Link = styled.a `
  text-decoration: none;
  position: relative;
  cursor: pointer;
  width: fit-content;

  color: ${({ theme, active }) => active ? theme.new?.link?.activeColor : "unset"};
  font-family: ${({ theme }) => theme.new?.link?.fontFamily ?? "Bold"};
  font-size: ${({ theme }) => theme.new?.link?.fontSize ?? "16px"};
  font-weight: ${({ theme }) => theme.new?.link?.fontWeight ?? "bold"};
  line-height: ${({ theme }) => theme.new?.link?.lineHeight ?? "20px"};

  :visited,
  :hover {
    text-decoration: none;
  }

  ::after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: ${(props) => props.top ?? "-26px"};
    visibility: hidden;
    width: 100%;
    height: 2px;
    background: ${({ theme }) => theme.new?.link?.activeUnderlineColor ?? "unset"};
    border-radius: 0;

    @media (max-width: 1023px) {
      bottom: 4px;
    }
  }

  :hover::after {
    visibility: unset;
  }

  ${({ active }) => active
    ? `::after {
    visibility: unset;
  }`
    : ""}
`;
const MobileLinksContainer = styled.div `
  position: fixed;
  top: 47px;
  left: 0px;
  right: 0px;
  touch-action: none;
  width: 100%;
  min-height: calc(100vh - 47px);
  z-index: 100;
  padding: 20px;
  overflow-y: scroll;
  background: white;
  display: flex;
  box-sizing: border-box;
`;
const MobileLinksCol = styled.div `
  display: flex;
  -webkit-box-flex: 0;
  flex: 0 1 calc(100% - 85px);
  flex-flow: column wrap;
  max-width: calc(100% - 105px);
  box-sizing: border-box;

  a {
    display: flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    height: 40px;
  }
`;
export const Mobile = Object.assign(MobileLinksContainer, {
    Links: MobileLinksCol,
});
//# sourceMappingURL=navigation.styled.js.map