@use '../common/mixins';
@use '../common/variables';

// —————————————————————————————————————————————————————————————————
// elements
// align
// —————————————————————————————————————————————————————————————————

// button apparition
@include mixins.keyframes(button-menu-opacity) {
	0% 		{ opacity: 0; }
	50% 	{ opacity: 0; }
	100% 	{ opacity: 100%; }
}

// lines > close
@include mixins.keyframes(button-menu-open-before) {
	0% 		{ transform: translateY(.325rem); }
	50% 	{ transform: translateY(0); 
			  	transform: rotate(0); }
	100% 	{ transform: rotate(45deg); }
}
@include mixins.keyframes(button-menu-open-after) {
	0% 		{ transform: translateY(-.325rem); }
	50% 	{ transform: translateY(0); 
			  	transform: rotate(0); }
	100% 	{ transform: rotate(-45deg); }
}

// close > lines
@include mixins.keyframes(button-menu-close-before) {
	0% 		{ transform: rotate(45deg); }
	50% 	{ transform: rotate(0); 
			  	transform: translateY(0); }
	100% 	{ transform: translateY(.325rem); }
}
@include mixins.keyframes(button-menu-close-after) {
	0% 		{ transform: rotate(-45deg); }
	50% 	{ transform: rotate(0); 
			  	transform: translateY(0); }
	100% 	{ transform: translateY(-.325rem); }
}

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

header {
  width: 100%;
}

.navbar {
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  background-color: variables.$background-paper;
  border-block-end: variables.$border;
  z-index: 13;
  
  @include mixins.responsive(up, tablet) {
    height: variables.$navbar-height;
  }

  @include mixins.responsive(down, tablet) {
    z-index: 11;
  }
  
  .section_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block-start: 0;
    padding-block-end: 0;

    @include mixins.responsive(up, tablet) {
      height: 100%;
    }

    @include mixins.responsive(down, tablet) {
      flex-direction: column;
      align-items: stretch;
      padding-block-start: 0;
    }
  }

  &_main {
    display: flex;
    align-items: center;

    @include mixins.responsive(down, tablet) {
      height: variables.$navbar-height-sm;
      justify-content: space-between;
    }
  }
  
  &_logo {
    display: flex;
    align-items: baseline;
    font-weight: variables.$weight-bold;
    border-radius: variables.$border-radius-sm;
    color: variables.$primary;
    
    img {
      max-height: 2rem;
    }
  }
  
  &_button {
    @include mixins.transition(variables.$transition-md, opacity);
    animation: button-menu-opacity variables.$transition-lg;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: calc(variables.$border-radius-sm/2);
    outline-offset: .25rem;
    
    @include mixins.responsive(up, tablet) {
      display: none;
    }

    &:before,
    &:after,
    span {
      background-color: variables.$text;
      border-radius: 0.15rem;
    }
  
    &:before,
    &:after {
      @include mixins.pseudo-element('', auto, auto, auto, auto, 1rem, 2px);
      @include mixins.transition(variables.$transition-md, transform);
    }
  
    &:before {
      transform: translateY(.325rem);
      animation: button-menu-close-before variables.$transition-lg;
    }
  
    &:after {
      transform: translateY(-.325rem);
      animation: button-menu-close-after variables.$transition-lg;
    }
  
    span {
      @include mixins.transition(variables.$transition-md, opacity);
      position: absolute;
      width: 1rem;
      height: 2px;
    }
  
    &.js-opened {
  
      &:before { animation: button-menu-open-before variables.$transition-lg forwards; }
      &:after { animation: button-menu-open-after variables.$transition-lg forwards; }
      span { opacity: 0; }
    }
  }  

  &_nav {
    display: flex;

    @include mixins.responsive(down, tablet) {
      @include mixins.transition(variables.$transition-md, max-height);
      align-items: flex-start;
      max-height: 0;
      overflow: hidden;

      .js-opened & {
        max-height: 80vh;
      }
    }
  }

  .nav {
    display: flex;

    @include mixins.responsive(up, tablet) { height: 100%; align-items: center; }
    @include mixins.responsive(down, tablet) { width: 100%; }

    &_container {

      @include mixins.responsive(up, tablet) {
        height: 100%;
        align-items: center;
      }

      @include mixins.responsive(down, tablet) {
        @include mixins.calc(max-height, '100vh - 12rem');
        align-items: stretch;
        overflow: scroll;
        width: 100%;
        margin-block-start: 1rem;
        margin-block-end: 1rem;
        flex-direction: column;
        width: 100%;
      }
    }

    &_item:not(:first-child) {

      @include mixins.responsive(down, tablet) {
        margin-block-start: .25rem;
        margin-inline-start: 0;
      }
    }

    &_item-dropdown {

      @include mixins.responsive(up, tablet) {
        
        .nav_target {
          @include mixins.calc(inset-block-start, '100% +' variables.$nav-item*0.5);
          position: absolute;
          inset-inline-start: -(variables.$nav-item*.5);
          width: 10rem;
          padding: variables.$nav-item*.5;
          border-radius: variables.$border-radius-md;
          border: variables.$border;
          z-index: 1;
          background-color: variables.$background-paper;
        }
      }
    }
  }
}

// —————————————————————————————————————————————————————————————————
// align
// —————————————————————————————————————————————————————————————————

.navbar-end {

  .section_container {

    @include mixins.responsive(up, tablet) {
      flex-direction: row-reverse;    
    }
  }

  .navbar_main {
    flex-direction: row-reverse;    
  }
}