@use "variables";

header.fwe-fixed-header {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: variables.$zindex-fixed;
}

.fwe-navbar-spacer {
  height: variables.$navbar-height;
  min-height: variables.$navbar-height;
  &.fwe-bottom-box-spacer {
    height: variables.$navbar-height + variables.$navbar-bottom-box-height;
    min-height: variables.$navbar-height + variables.$navbar-bottom-box-height;
  }
}

.fwe-navbar {
  display: flex;
  align-items: center;
  height: variables.$navbar-height;
  max-height: variables.$navbar-height;
  background: variables.$white;
  border-bottom: 1px solid variables.$border;
  position: relative;
  overflow: visible;

  @media (max-width: variables.$breakpoint-lg-min) {
    padding-left: 36px;
  }

  @media (max-width: variables.$breakpoint-md-min) {
    padding-left: 0px;
  }

  &.fwe-navbar-toolbar-left {
    padding-left: 60px;
  }

  &.fwe-navbar-toolbar-right {
    padding-right: 60px;
  }

  .fwe-app-logo-container {
    display: none;
    position: absolute;
    top: 24px;
    left: 18px;
    height: 24px;
    width: 24px;
    img {
      height: 24px;
      width: 24px;
    }
    @media (min-width: variables.$grid-breakpoint-md) {
      display: block;
    }
  }

  &--no-logo {
    padding-left: 0px !important;
  }

  .fwe-app-title-container {
    font-weight: bold;
    display: none;
    margin-bottom: 17px;
    margin-right: 48px;
    @media (min-width: variables.$grid-breakpoint-md) {
      display: block;
    }
  }

  .fwe-container {
    display: flex;
    align-items: flex-end;
    height: variables.$navbar-height;
    max-height: variables.$navbar-height;

    img.fwe-logo {
      position: relative;
      top: 4px;
      left: 0px;
      margin-right: 24px;
    }
  }

  @keyframes fadeInAnimation {
    0% {
      visibility: hidden;
      opacity: 0;
    }

    1% {
      visibility: visible;
      opacity: 0;
    }

    100% {
      visibility: visible;
      opacity: 1;
    }
  }

  @keyframes fadeOutAnimation {
    0% {
      visibility: visible;
      opacity: 1;
    }

    99% {
      visibility: visible;
      opacity: 0;
    }

    100% {
      visibility: hidden;
      opacity: 0;
    }
  }

  @keyframes translateInAnimation {
    0% {
      transform: translate(-300px);
    }
    100% {
      transform: translate(0px);
    }
  }

  @keyframes translateOutAnimation {
    0% {
      transform: translate(0px);
    }
    100% {
      transform: translate(-300px);
    }
  }

  .fwe-mobile-navlist-container {
    display: none;
    align-items: stretch;
    background: variables.$background-modal;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    z-index: 100;

    nav.fwe-mobile-navlist {
      width: 300px;
      background: variables.$white;
      &:first-child {
        padding-top: 48px;
      }
      &:last-child {
        padding-bottom: 48px;
      }
      a {
        padding: 16px 32px 16px 48px;
        list-style-type: none;
        display: block;
        color: variables.$text;

        &.fwe-active {
          color: variables.$hero;
        }
      }
    }

    &.fwe-opened {
      display: flex;
      animation: fadeInAnimation 0.4s ease-out forwards;
      .fwe-mobile-navlist {
        animation: translateInAnimation 0.4s ease-out forwards;
      }
    }
    &.fwe-closed {
      display: flex;
      animation: fadeOutAnimation 0.4s ease-in forwards;
      .fwe-mobile-navlist {
        animation: translateOutAnimation 0.4s ease-in forwards;
      }
    }
  }

  .fwe-navlist {
    -webkit-user-select: none;
    user-select: none;
    margin-right: auto;
    align-items: flex-end;
    a {
      display: block;
      white-space: nowrap;
      color: variables.$text;
      padding-bottom: 17px;
      position: relative;
      margin-right: 24px;
      &:last-child {
        margin-right: 0;
      }
      &::after {
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 0px;
        content: "";
        background: variables.$hero;
        transition: height 0.2s;
      }
      &.fwe-active {
        color: variables.$hero;
        &::after {
          height: 4px;
        }
      }
    }
  }

  .fwe-button-container {
    display: grid;
    grid-column-gap: variables.$spacer-m;
    grid-auto-flow: column;
    margin-bottom: 13px;
    align-items: center;
  }

  .fwe-logo-container {
    margin-bottom: 20px;
    margin-left: 113px;
    .fwe-festo-logo {
      height: 20px;
      width: 113px;
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='113.15' height='20'%3E%3Cg fill='%230091dc'%3E%3Cpath d='M82.06 20h-4.14a.25.25 0 01-.2-.06c-.06-.07-.05-.2-.02-.33a1.92 1.92 0 00.02-.29V4.45c0-.43-1.06-.44-1.19-.44h-6.88a1.25 1.25 0 01-1.01-.9V0h21.68c.38 0 .53 0 .53.39v2.7c0 .37-.14.92-.53.92h-6.9c-.39 0-.65.07-.65.44v14.86a.71.71 0 01-.71.68zm-18.6 0H49.62a4.19 4.19 0 01-2.93-1.18 4.1 4.1 0 01-1.26-2.88v-.68c0-.24.18-.27.37-.27H46l.2.01h4.13c.25 0 .69.07.69.5 0 .41.37.5.68.5h8.97c.79 0 .9-.72.9-1.42v-1.35c0-.75-.15-1.22-.9-1.22H49.64a4.3 4.3 0 01-2.96-1.25 4.21 4.21 0 01-1.26-2.93V3.77a3.91 3.91 0 011.3-2.76 3.96 3.96 0 012.65-1H63.7a3.94 3.94 0 012.64 1 3.9 3.9 0 011.29 2.76v.68c0 .39-.39.56-.75.56h-4.14c-.25 0-.68-.06-.68-.5 0-.32-.25-.5-.7-.5H52.4c-.77 0-.92.4-.92 1.11v1.36c0 1.01.31 1.53.92 1.53h11.2a4.05 4.05 0 012.75 1.08 4 4 0 011.28 2.8v4.05a4.08 4.08 0 01-1.24 2.88A4.17 4.17 0 0163.46 20zM43.4 20H22.75c-.34 0-.54-.25-.54-.68V.39c0-.36.15-.38.54-.38H43.4c.38 0 1.01 0 1.01.38v2.72a1.21 1.21 0 01-1.01.9H28.26c-.37 0-1 .06-1 .45v2.7c0 .37.63.85 1 .85h13.8c.16 0 .24.02.29.07s.05.15.05.3v2.83c0 .37 0 .8-.34.8h-13.8c-.35 0-1 .16-1 .56v2.7c0 .38.62.74 1 .74H43.4c.4 0 1.01.24 1.01.62v2.7c0 .38-.61.67-1.01.67zM4.6 20H.68a.68.68 0 01-.69-.68V.4C0 .01.32.01.69.01H20c.15 0 .21 0 .23.03s0 .04 0 .09a1 1 0 00-.04.26v2.72a2.7 2.7 0 00.02.3c.03.21.06.44-.04.54a.22.22 0 01-.17.06H6.2c-.26 0-1.15.03-1.15.44v2.71c0 .37.78.85 1.16.85h12.41a.63.63 0 01.07 0 .62.62 0 01.4.15.61.61 0 01.22.44v2.72a.7.7 0 01-.7.69H6.22c-.4 0-1.16.2-1.16.56v6.75c0 .35-.06.68-.46.68z' /%3E%3Cpath d='M109.55 20H96.3a3.24 3.24 0 01-2.58-1.2 4.5 4.5 0 01-.93-2.87V3.76a3.52 3.52 0 01.92-2.7A3.33 3.33 0 0196.13 0h13.61a3.38 3.38 0 012.43 1.05 3.58 3.58 0 01.98 2.71v12.17a3.84 3.84 0 01-.95 2.84 3.61 3.61 0 01-2.65 1.22zM98.95 4c-.81 0-1.32.43-1.32 1.11v9.46A1.38 1.38 0 0098.95 16h7.95a1.46 1.46 0 001.4-1.42l-.01-9.46c0-.5-.37-1.1-1.4-1.1z' /%3E%3C/g%3E%3C/svg%3E");
      background-repeat: no-repeat;
      @media (max-width: variables.$breakpoint-xs-min) {
        margin-right: 8px;
      }
    }
    @media (max-width: variables.$grid-breakpoint-sm) {
      margin-left: 32px !important;
    }
  }
}

.fwe-navbar-bottom-box {
  background-color: variables.$control;
  .fwe-container {
    overflow: hidden;
    height: variables.$navbar-bottom-box-height;
    display: flex;
    align-items: center;
  }
}

// Margin for fixed overlay elements used with fixed navbar
.fwe-navbar-margin {
  margin-top: variables.$navbar-height;
}