header {
  position: relative;
  
  .header__top-bar {
    background-color: #fff;
    background-image: linear-gradient(45deg, #ffffff 55%, var(--color-red-one) 40%);
    border-bottom: 1px solid #dfdfdf;
    padding: 10px 0;
    font-size: 14px;

    a, a:link, a:hover, a:visited {
      display: inline-block;
      line-height: 1;
      text-decoration: none;
    }

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

    .header_social-icon {
      color: var(--color-brand);
    }
  }

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

  .header__menu-bar {
    background-color: white;
    width: 100%;
    box-shadow: rgba(157, 157, 157, 0.5) 0 14px 14px -17px;

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

    .desktop-menu {
      display: none;
    }

    .header-logo {
      height: 30px;
    }

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

      #btnMobileMenu,
      #btnMobileMenu span {
        display: inline-block;
        box-sizing: border-box;
      }
      #btnMobileMenu {
        position: relative;
        width: 40px;
        height: 40px;
        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: #000;
        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, 11px) rotate(45deg);
      }
      #btnMobileMenu.active span:nth-of-type(1):after {
        transform: translate(-3px, 11px) 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 {
        transition: all .5s ease-in-out;
        position: absolute;
        display: block;
        right: 0;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 20px;
        z-index: 100;
        font-size: 1rem;
        box-shadow: 2px 2px 5px #00000080;
        width: max-content;
        transform: translate(100%, 0);

        & > ul > li {
          display: block;
          text-align: right;
          white-space: nowrap;
          padding: 4px 0;

          a {
            padding: 0;
          }
        }

        .sub-arrow {
          display: none;
        }

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

          li {
            padding: 4px 0;
          }
        }

        &.visible {
          /* right: 14px; */
          transform: translate(0, 0);
        }
      }
    }

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

          & > a {
            position: relative;
            padding: 10px 20px;
            text-decoration: none;
            transition: all .25s ease-in-out;

            &:link, &:hover, &:visited {
              text-decoration: none;
              color: var(--color-gray-one);
              font-weight: 400;
              vertical-align: middle;
            }
          }

          & > a:hover {
            color: var(--color-red-one);
            position: relative;
          }

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

          & > ul.submenu {
            display: none;
            
            & > li {
              & > a {
                color: var(--color-gray-one);
                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-red-one);
                  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;
            }
          }

          &.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;
      }
    }
  }
}