import styled from "styled-components";
import { currentTheme } from "../../theme";
export const Header = styled.header(({ sticky, fullWidth }) => `
  width: 100%;
  height: 40px;

  max-width: ${currentTheme.submenu?.[fullWidth ? "maxWidthFull" : "maxWidth"]};

  margin: 0 auto 24px;
  padding: 0 22px;

  border-radius: ${currentTheme.submenu?.borderRadius};
  border: 1px solid ${currentTheme.submenu?.borderColor};

  background: #FFFFFF;
  box-shadow: ${currentTheme.submenu?.boxShadow};

 ${sticky
    ? `
  position: sticky;
  top: 0;
  z-index: 20;
  `
    : ""}

  .ui-submenu__nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .ui-submenu__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .ui-submenu__item {
    margin-right: 24px;

    :last-of-type {
      margin-right: 0;
    }

    > a {
      text-decoration: none;
      height: 40px;
      display: flex;
      align-items: center;
      padding-top: 3px;
      border-bottom: 3px solid transparent;
      box-sizing: border-box;

      transition: 0.2s;

      &.active {
        border-bottom: 3px solid ${currentTheme.colors.primary};
      }

      &:hover {
        border-bottom: 3px solid ${currentTheme.colors.light};
      }

    }
  }


`);
export const List = styled.ul(({ secondary }) => `
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;

    ${secondary
    ? `
    .ui-submenu__item {
      a, p, span, div {
        color: ${currentTheme.colors.secondary};
      }
    }
    `
    : ""}
`);
//# sourceMappingURL=styled.js.map