@import 'constants';

@mixin navbar-base {
    background-color: $color-dark;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    width: 100%;
    z-index: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    line-height: 1;
}

@mixin navbar-menu-items-base {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    clear: both;
    max-height: 0;
    transition: max-height .4s ease-out;
    position: relative;
    flex-basis: 100%;
    align-items: center;
    display: flex;

    @media screen and (max-width: $laptop - 1px) {
        align-items: flex-start;
        flex-direction: column;
    }

    li {
        margin: 0;

        @media screen and (max-width: $laptop - 1px) {
            width: 100%;
        }

        a {
            display: block;
            padding: 1.25em 1.25em;
            text-decoration: none;

            &:hover, &:focus, &:active {
                color: $color-white;
            }
        }

        &:hover, &:focus {
            background-color: darken-1($color-dark);
        }

        &:active {
            background-color: darken-2($color-dark);
        }
    }
}

@mixin navbar-brand-base {
    display: flex;
    align-items: center;
    font-size: 2em;
    padding: 0.3em 0.6em;
    text-decoration: none;
}

@mixin navbar-colors {
	@each $colorName, $color in $color-list {
        &.#{$colorName} {
        	background-color: $color;
        	
            .navbar-menu-items {
		        li {
			        &:hover, &:focus {
			        	background-color: darken-1($color);
			        }

			        &:active {
			        	background-color: darken-2($color);
			        }
			    }
		    }
        }
    }
}