@use '../abstracts/mixins' as *;

.navbar,
.navbar ul,
nav,
nav ul {
  display: flex;
}

.navigation {
  display: flex;
  z-index: 5000;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  //background-color: var(--navbar-background);

  &--fixed {
    position: fixed;
    top: 0;
    left: 0;

    + * {
      margin-top: 5.8rem;
    }
  }

  &--sticky {
    position: sticky;
    top: 0;
    left: 0;
  }
}

.navbar,
nav {
  $ref: '.navbar';

  --background-color: var(--neutral-color-variation-1); //hsl(var(--neutral-color-h) var(--neutral-color-variation-1-s) var(--neutral-color-variation-1-l) / 0.85);

  position: relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--background-color);
  padding: 0.5em;

  ul {
    align-items: center;
    height: 100%;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;
    list-style: none;
  }

  li {
    position: relative;
    display: inline-flex;
    margin: 0;
    padding: var(--half-spacing);
    cursor: pointer;
    //text-align: center;
    //width:100%;

    &.dropdown {
      flex-direction: column;
      justify-content: inherit;
      align-items: inherit;

      & > .dropdown__menu,
      & > ul {
        position: relative;
        visibility: collapse;
        top: 0;
        left: 0;

        display: flex;
        flex-direction: column;
        justify-content: inherit;
        align-items: inherit;

        min-width: max-content;
        max-height: 0;
        height: 0;
        margin: 0;
        padding: 0;
        z-index: 5500;

        background-color: transparent;
        opacity: 0;
        transition: all 0.25s ease-in;

        width: 100%;
        box-shadow: none;
      }
    }

    /* &:hover {
       & > .dropdown__menu,
       & > ul {
         visibility: visible;
         max-height: 50em;
         height: auto;
         opacity:1;
       }
     }*/

    & > ul li.dropdown > ul,
    & > ul li.dropdown > .dropdown__menu {
      left: 0;

      &.dropdown__menu--left {
        left: 0;
      }
    }
  }

  a {
    display: block;
  }

  > input[type='checkbox'] {
    display: none;
  }
}

.navbar {
  &--align-left {
    justify-content: flex-start;
  }

  &__item-push-right {
    //margin-right: var(--inner-h-spacing);
    margin-left: auto;
  }

  &__menu-right {
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;
    justify-content: flex-end;
    margin-right: 0.5em;
  }
}

nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label:not(.navbar__toggler),
.navbar__toggler {
  z-index: 2500;
  width: 1em;
  height: 1em;
  // margin-top: -.25em !important;
  margin-right: 0.5em;
  text-align: center;
  cursor: pointer;
}
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) label span:first-child:not(.navbar__toggler__icon),
.navbar__toggler__icon {
  --background-color: var(--primary-color);
  --hover-background-color: var(--primary-color-variation-1);

  display: inline-block;
  position: relative;
  width: 2.5rem;
  height: 2px;
  //margin-top: 2rem;
  border: none;
  background-color: var(--background-color);
  transition: all 0.2s ease-in-out;

  &:before,
  &:after {
    display: inline-block;
    position: absolute;
    left: 0;
    width: 2.5rem;
    height: 2px;
    background-color: var(--background-color);
    content: '';
    transition: all 0.2s ease-in-out;
  }
  &:before {
    top: -0.8rem;
  }
  &:after {
    top: 0.8rem;
  }

  &:hover {
    & span:first-child,
    & .navbar__toggler__icon {
      background-color: var(--hover-background-color);

      &:before,
      &:after {
        background-color: var(--hover-background-color);
      }
    }
  }
}

nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) div:first-of-type,
.navbar__menu {
  --background-color: transparent; //var(--neutral-color-variation-1); //hsl(var(--neutral-color-h) var(--neutral-color-variation-1-s) var(--neutral-color-variation-1-l) / 0.7);
  --box-shadow: var(--neutral-shadow-alt);

  display: flex;
  position: absolute;
  margin: 0;
  top: 100%;
  left: 0;
  width: 100%;
  padding: calc(var(--inner-v-spacing) * 0.5) 0;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: all 0.3s ease-in-out;
  z-index: 9999;

  ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  li:not(:first-child) {
    margin-top: var(--half-spacing);
  }
}
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) div:first-of-type ul li,
.navbar__menu__item {
  display: flex;
  position: relative;
  flex-grow: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  /*  &:hover + a {
        background-color: var(--navbar-menu-item-background-hover);
      }*/
}

.navigation > input[type='checkbox']:checked ~ .navbar__toggler .navbar__toggler__icon,
.navbar > input[type='checkbox']:checked ~ .navbar__toggler .navbar__toggler__icon,
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) > input[type='checkbox']:checked ~ label span:first-child,
nav > input[type='checkbox']:checked ~ .navbar__toggler .navbar__toggler__icon {
  background: transparent;
}

.navigation > input[type='checkbox']:checked ~ .navbar__toggler .navbar__toggler__icon:before,
.navbar > input[type='checkbox']:checked ~ .navbar__toggler .navbar__toggler__icon:before,
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) > input[type='checkbox']:checked ~ label span:first-child:before,
nav > input[type='checkbox']:checked ~ .navbar__toggler .navbar__toggler__icon:before {
  top: 0;
  height: 3px;
  transform: rotate(135deg);
}

.navigation > input[type='checkbox']:checked ~ .navbar__toggler .navbar__toggler__icon:after,
.navbar > input[type='checkbox']:checked ~ .navbar__toggler .navbar__toggler__icon:after,
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) > input[type='checkbox']:checked ~ label span:first-child:after,
nav > input[type='checkbox']:checked ~ .navbar__toggler .navbar__toggler__icon:after {
  top: 0;
  height: 3px;
  transform: rotate(-135deg);
}

.navigation > input[type='checkbox']:checked ~ .navbar .navbar__menu,
.navigation > input[type='checkbox']:checked ~ nav .navbar__menu,
.navbar > input[type='checkbox']:checked ~ .navbar__menu,
nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle) > input[type='checkbox']:checked ~ div:first-of-type,
nav > input[type='checkbox']:checked ~ .navbar__menu {
  --background-color: var(--neutral-color-variation-1);
  transform: scale(1);
  opacity: 1;
  transition: all 0.3s ease-in-out;
}
@include mq(tablet) {
  .t\:navigation-toggle .navbar__toggler {
    display: none;
  }
  //nav div:first-of-type,
  .t\:navigation-toggle .navbar__menu {
    position: inherit;
    top: 0;
    left: 0;
    align-items: flex-end;

    width: auto;
    //margin-right: var(--inner-h-spacing);
    padding: 0;
    transform: scaleY(1);
    box-shadow: none;
    opacity: 1;

    ul {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }

    li:not(:first-child) {
      margin-top: 0;
    }
  }
}

@include mq(tablet-medium) {
  //, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle ) label,
  //nav label,
  nav.md\:navigation-toggle .navbar__toggler,
  nav:not(.navbar, .md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle, .navigation--burger) label {
    display: none !important;
  }

  .md\:navigation-toggle {
    & nav,
    & .navbar {
      & li.dropdown {
        width: auto;

        & li {
          margin-top: 0;
        }

        & > .dropdown__menu,
        & > ul {
          --background-color: hsl(var(--neutral-color-h) var(--neutral-color-variation-1-s) var(--neutral-color-variation-1-l));
          --box-shadow: var(--neutral-shadow-alt);

          position: absolute;
          top: 100%;
          left: 0;
          padding: var(--half-spacing) 0;
          background-color: var(--background-color);
          box-shadow: var(--box-shadow);

          & li {
            width: auto;
          }
        }

        & > ul li.dropdown > ul {
          top: 0;
          left: 100%;
        }

        & > .dropdown__menu--left {
          //--offset:calc(-100% - var(--half-spacing));
          //transform : translateX(var(--offset));
          left: calc(-100% - var(--spacing)) !important;
        }
      }
    }
  }

  nav:not(.md\:navigation-toggle, .d\:navigation-toggle, .dm\:navigation-toggle, .lg\:navigation-toggle, .xlg\:navigation-toggle, .xxlg\:navigation-toggle, .navigation--burger) div:first-of-type,
  .md\:navigation-toggle .navbar__menu {
    position: inherit;
    top: 0;
    left: 0;
    align-items: flex-end;

    width: auto;
    //margin-right: var(--inner-h-spacing);
    padding: 0;
    transform: scaleY(1);
    box-shadow: none;
    opacity: 1;

    ul {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
    }

    li:not(:first-child) {
      margin-top: 0;
    }
  }
}

@include mq(desktop) {
  .d\:navigation-toggle {
    & .navbar__toggler {
      display: none;
    }

    & nav,
    & .navbar {
      & .dropdown {
        & ul,
        & ul li ul {
          --box-shadow: var(--neutral-shadow-alt);

          position: absolute;
          top: 100%;
          width: max-content;
          box-shadow: var(--box-shadow);
        }

        & ul li > ul {
          left: 100%;
        }

        &__menu--left {
          left: calc(-100% - var(--half-spacing));
        }
      }
    }

    & .navbar__menu {
      position: inherit;
      top: 0;
      left: 0;
      align-items: flex-end;

      width: auto;
      //margin-right: var(--inner-h-spacing);
      padding: 0;
      transform: scaleY(1);
      box-shadow: none;
      opacity: 1;

      ul {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
      }

      li:not(:first-child) {
        margin-top: 0;
      }
    }
  }
}

@include mq(desktop-medium) {
  .dm\:navigation-toggle {
    & .navbar__toggler {
      display: none;
    }

    & nav,
    & .navbar {
      & .dropdown {
        & ul,
        & ul li ul {
          --box-shadow: var(--neutral-shadow-alt);

          position: absolute;
          top: 100%;
          width: max-content;
          box-shadow: var(--box-shadow);
        }

        & ul li > ul {
          left: 100%;
        }

        &__menu--left {
          left: calc(-100% - var(--half-spacing));
        }
      }
    }

    & .navbar__menu {
      position: inherit;
      top: 0;
      left: 0;
      align-items: flex-end;

      width: auto;
      //margin-right: var(--inner-h-spacing);
      padding: 0;
      transform: scaleY(1);
      box-shadow: none;
      opacity: 1;

      ul {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
      }

      li:not(:first-child) {
        margin-top: 0;
      }
    }
  }
}

@include mq(desktop-lg) {
  .lg\:navigation-toggle {
    & .navbar__toggler {
      display: none;
    }

    & nav,
    & .navbar {
      & .dropdown {
        & ul,
        & ul li ul {
          --box-shadow: var(--neutral-shadow-alt);

          position: absolute;
          top: 100%;
          width: max-content;
          box-shadow: var(--box-shadow);
        }

        & ul li > ul {
          left: 100%;
        }

        &__menu--left {
          left: calc(-100% - var(--half-spacing));
        }
      }
    }

    & .navbar__menu {
      position: inherit;
      top: 0;
      left: 0;
      align-items: flex-end;

      width: auto;
      //margin-right: var(--inner-h-spacing);
      padding: 0;
      transform: scaleY(1);
      box-shadow: none;
      opacity: 1;

      ul {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
      }

      li:not(:first-child) {
        margin-top: 0;
      }
    }
  }
}

@include mq(desktop-xlg) {
  .xlg\:navigation-toggle {
    & .navbar__toggler {
      display: none;
    }

    & nav,
    & .navbar {
      & .dropdown {
        & ul,
        & ul li ul {
          --box-shadow: var(--neutral-shadow-alt);

          position: absolute;
          top: 100%;
          width: max-content;
          box-shadow: var(--box-shadow);
        }

        & ul li > ul {
          left: 100%;
        }

        &__menu--left {
          left: calc(-100% - var(--half-spacing));
        }
      }
    }

    & .navbar__menu {
      position: inherit;
      top: 0;
      left: 0;
      align-items: flex-end;

      width: auto;
      //margin-right: var(--inner-h-spacing);
      padding: 0;
      transform: scaleY(1);
      box-shadow: none;
      opacity: 1;

      ul {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
      }

      li:not(:first-child) {
        margin-top: 0;
      }
    }
  }
}

@include mq(desktop-xxlg) {
  .xxlg\:navigation-toggle {
    & .navbar__toggler {
      display: none;
    }

    & nav,
    & .navbar {
      & .dropdown {
        & ul,
        & ul li ul {
          --box-shadow: var(--neutral-shadow-alt);

          position: absolute;
          top: 100%;
          width: max-content;
          box-shadow: var(--box-shadow);
        }

        & ul li > ul {
          left: 100%;
        }

        &__menu--left {
          left: calc(-100% - var(--half-spacing));
        }
      }
    }

    & .navbar__menu {
      position: inherit;
      top: 0;
      left: 0;
      align-items: flex-end;

      width: auto;
      //margin-right: var(--inner-h-spacing);
      padding: 0;
      transform: scaleY(1);
      box-shadow: none;
      opacity: 1;

      ul {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
      }

      li:not(:first-child) {
        margin-top: 0;
      }
    }
  }
}