@import "okayNav-vars.less";

/*
 * We are hiding the invisible nav outside the screen
 * so we need to avoid the horizontal scroll
 */
body.okayNav-loaded {overflow-x: hidden}

.okayNav-header {
    position: fixed;
    top: 0;

	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;

    width: 100%;
	padding: 0 15px;

	-webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
	-webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.okayNav {

	&:not(.loaded) {
		// Hide the links by default to avoid FOUC
		visibility: hidden;

		user-select: none;
	}

	ul {
		/* We want two navigations - one hidden and one visible */
		float: left
	}

	a {
		position: relative;
		z-index: 1;
	}
}

.okayNav__nav--visible {
	overflow: hidden;

	white-space: nowrap;

	li {display: inline-block;}

	a {
		/* Link styling for the visible part of the nav */
		display: block;

		padding: @oknav-links-padding-y @oknav-links-padding-x;

		transition: color @oknav-transition-speed @oknav-transition-curve;
	}

    &:empty {
        & ~ .okayNav__menu-toggle {top: 0}
    }
}

/* Link styling for the off-screen part of the nav */
.okayNav__nav--invisible {
	position: fixed;
	top: @oknav-header-height;
	bottom: 0;

	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;

	a {
		display: block;

		width: 240px;
		padding: 15px;

		background: #fff;
	}

	&.nav-left {
		left: 0;

		transform: translateX(-100%);
	}
	&.nav-right {
		right: 0;

		transform: translateX(100%);
	}
	&.transition-enabled {transition: transform 400ms @oknav-transition-curve}
	&.nav-open {transform: translateX(0)}
}

/* Kebab icon */
.okayNav__menu-toggle {
	position: relative;
	z-index: 1;
	top: @oknav-links-padding-y;

	float: left;

	width: 40px;
	height: 20px;

	cursor: pointer;
	transition: transform 400ms @oknav-transition-curve;

	&.okay-invisible {
		position: absolute;

		user-select: none;
		pointer-events: none;

		opacity: 0;
	}

	span {
		position: absolute;
		right: 0;
		left: 0;

		display: block;

		width: 4px;
		height: 4px;
		margin: auto;

		pointer-events: none;

		border-radius: 50%;

		&:nth-child(1) {top: 0;}
		&:nth-child(2) {
            top: 50%;

            transform: translateY(-50%);
        }
		&:nth-child(3) {bottom: 0;}
	}

	&.icon--active { /* Kebab icon when off-screen nav is open */
		transform: rotate(90deg);
	}
}
