header {
  position: relative;
  background: var(--color-brand-light-2);
  
  /* .header__top-bar {
    padding: 10px 0;
    font-size: 14px;
    color: white;
    font-weight: 300;

    a, a:link, a:hover, a:visited {
      display: inline-block;
      line-height: 1;
      text-decoration: none;
      transition: color .3s ease-in-out;
      color: white;
    }

    a:hover {
      color: var(--color-gray-light);
    }

    a svg {
      fill: #fff;
      height: 24px;
    }

    .header_social-icon {
      color: white;
    }

    i {
      color: white;
    }
  } */

  a, a:link, a:hover, a:visited {
    text-decoration: none;
  }

  .header__menu-bar {
    width: 100%;
    padding: 15px 0;
    box-shadow: 0 0px 4px rgba(0, 0, 0, .5);

    &.sticky {
      position: fixed;
      top: 0;
      z-index: 1000;
      box-shadow: 0px 0px 5px black;
    }

    .header-logo {
      max-height: 40px;
      margin: 20px 0;
    }

    .desktop-menu {
      display: none;
    }

    .mobile-menu {
      display: block;
      text-align: right;

      #btnMobileMenu,
      #btnMobileMenu span {
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
      }
      #btnMobileMenu {
        position: relative;
        width: 36px;
        height: 30px;
        background: none;
        border: none;
        appearance: none;
        cursor: pointer;
        overflow: hidden;
      }
      #btnMobileMenu:focus:not(:focus-visible) {
        outline: none;
      }
      #btnMobileMenu span {
        position: absolute;
        width: 100%;
        height: 4px;
      }
      #btnMobileMenu span:before,
      #btnMobileMenu span:after {
        content: '';
        position: absolute;
        width: 51%;
        height: 4px;
        background: white;
        transition: .2s;
      }
      #btnMobileMenu span:before {
        left: 0;
        border-radius: 4px 0 0 4px;
      }
      #btnMobileMenu span:after {
        right: 0;
        border-radius: 0 4px 4px 0;
      }
      #btnMobileMenu span:nth-of-type(1) {
        top: 0;
        left: 0;
      }
      #btnMobileMenu span:nth-of-type(2) {
        top: calc(50% - 2px);
        left: 0;
      }
      #btnMobileMenu span:nth-of-type(3) {
        bottom: 0;
        left: 0;
      }
      #btnMobileMenu.active span:nth-of-type(1):before {
        transform: translate(4px, 4px) rotate(45deg);
      }
      #btnMobileMenu.active span:nth-of-type(1):after {
        transform: translate(-3px, 4px) rotate(-45deg);
      }
      #btnMobileMenu.active span:nth-of-type(2):before {
        transform: translateX(-75%);
        opacity: 0;
      }
      #btnMobileMenu.active span:nth-of-type(2):after {
        transform: translateX(75%);
        opacity: 0;
      }
      #btnMobileMenu.active span:nth-of-type(3):before {
        transform: translate(4px, -11px) rotate(-45deg);
      }
      #btnMobileMenu.active span:nth-of-type(3):after {
        transform: translate(-3px, -11px) rotate(45deg);
      }

      nav {
        position: absolute;
        display: none;
        left: 0;
        width: 100%;
        background: white;
        z-index: 100;
        font-size: 1rem;
        box-shadow: 2px 2px 5px #00000080;
        overflow: hidden;
        margin-top: 15px;

        & > ul > li {
          display: block;
          text-align: left;
          white-space: nowrap;
          border-bottom: 1px solid #2f3544;
          font-size: 1.25rem;

          a {
            display: block;
            padding: 20px;
            color: var(--color-gray-medium);
          }
        }

        .sub-arrow {
          display: none;
        }

        .sub-menu-dropdown {
          display: block;
          width: inherit;

          li {
            padding: 4px 0;
          }
        }

        &.animated {
          transition: all .3s ease-in-out;
        }

        &.visible {
          display: block;
        }
      }
    }

    nav {
      position: relative;
      
      & > ul {
        text-align: center;
        
        & > li {
          display: inline-block;
          font-size: 1.2rem;
          position: relative;

          & > a, & > span {
            position: relative;
            padding: 10px 20px;
            text-decoration: none;
            transition: all .25s ease-in-out;
            color: white;
            text-decoration: none;
            font-weight: 400;
            vertical-align: middle;
            transition: color .3s ease-in-out;
          }

          & > a:hover {
            color: var(--color-brand-light);
          }

          /* & > span {
            color: black;
            font-weight: bold;
          } */

          &[data-has-submenu] i {
            font-size: .75rem;
          }

          &.full-submenu {
            position: inherit;

            .submenu {
              width: 100%;
              left: 0;
            }
          }

          .submenu {
            display: none;
            width: max-content;
            position: absolute;
            z-index: 1000;
            background-color: white;
            box-shadow: 0 0 6px rgba(0, 0, 0, .5);
            top: calc(100% + 6px);
            opacity: 0;
            transition: all .25s ease-in-out;
            text-align: left;
            left: 0;
            /* transform: translate(-50%, 0);*/
            
            li {
              a {
                color: var(--color-gray-medium);
                display: block;
                line-height: 3rem;
                text-transform: uppercase;
                font-size: .75rem;
                padding: 0 30px;
                transition: all .5s ease-in-out;
                white-space: nowrap;

                &:hover {
                  background-color: var(--color-brand-1);
                  color: white;
                }
              }
            }
          }

          /* &.display-submenu {
            & > ul.submenu {
              display: block;
              position: absolute;
              z-index: 1000;
              background-color: white;
              box-shadow: 0 0 6px rgba(0, 0, 0, .5);
              top: calc(100% + 10px);
              opacity: 0;
              transition: all .25s ease-in-out;
              text-align: left;
            }
          } */

          &:hover {
            .submenu {
              display: block;
              opacity: 1;
            }
          }

          /* &.active {
            & > ul.submenu {
              opacity: 1;
            }
          } */
        }
      }
    }

    .header-crypto {
      height: 35px;
    }

    .header__menu-bar__logo {
      width: 60px;
    }

    .icon-caret-down {
      width: 1rem;
      height: 1rem;
    }

    .sub-menu-dropdown {
      display: none;
      z-index: 8000;
      width: max-content;
      border-radius: 4px;

      &.visible {
        display: inline-block;
        background-color: white;
        position: absolute;
        top: 100%;
        left: 17px;
      }

      li {
        padding: 5px 20px;
      }
    }
  }

  @media (min-width: 980px) {
    .header__menu-bar {
      .desktop-menu {
        display: block;
      }

      .mobile-menu {
        display: none;
      }

      .header__menu-bar__logo {
        width: 100px;

        nav {
          & > ul {
            & > li {
              & > a:hover {
                &:after {
                  opacity: 1;
                }
              }
            }
          }
        }
      }

      .header-crypto {
        height: 50px;
      }
    }
  }
}