import styled, { createGlobalStyle } from 'styled-components';

import Colors from '../Colors';
import TextHelper from '../TextHelper';

export const Navigation = styled.nav<{ axisZ: boolean }>`
  background-color: ${Colors.urbanSky};
  text-align: center;
  position: sticky;
  z-index: 1;
  top: 0;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

  ${({ axisZ }) => axisZ && `box-shadow: 0 0px 16px 7px rgba(0,0,0,0.1);`}

  @media screen and (max-width: 768px) {
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  ul {
    margin: 0;
    padding: 0;
  }

  li {
    display:inline-block;

    &:nth-child(2) {
      margin:0 20px;
    }

    a {
      text-decoration: none;
      font-family: ${TextHelper.fontVariant('medium')};
      color: ${Colors.support};
      padding: 20px 20px;
      display: inherit;

      @media screen and (max-width: 768px) {
        padding: 20px 11px;
      }

      &:hover, &.active {
        color: ${Colors.mongeral};
      }
    }
  }
`;

export const Smooth = createGlobalStyle`html { scroll-behavior: smooth; }`;