// -------------------------------
//       Hamburger-Cross
// -------------------------------

// https://codepen.io/djdabe/pen/qXgJNV

.hamburger {

    display: block;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    outline: none;

    .hamb-top, .hamb-middle, .hamb-bottom {
        position: absolute;
        left: 0;
        height: 4px;
        width: 100%;
        background-color: #1a1a1a;
    }

    &.light {
        .hamb-top, .hamb-middle, .hamb-bottom {
            background-color: #fff;
        }
    }

    &.is-closed {
        &:before {
            content: '';
            display: block;
            width: 100px;
            font-size: 14px;
            color: #fff;
            line-height: 32px;
            text-align: center;
            opacity: 0;
            -webkit-transform: translate3d(0,0,0);
            -webkit-transition: all .35s ease-in-out;
        }

        &:hover{
            &:before {
                opacity: 1;
                display: block;
                transform: translate3d(-100px, 0, 0);
                transition: all .35s ease-in-out;
            }

            .hamb-top {
                top: 0;
                transition: all .35s ease-in-out;
            }
            .hamb-bottom {
                bottom: 0;
                transition: all .35s ease-in-out;
            }
        }

        .hamb-top {
            top: 5px;
            -webkit-transition: all .35s ease-in-out;
        }
        .hamb-middle {
            top: 50%;
            margin-top: -2px;
        }
        .hamb-bottom {
            bottom: 5px;
            -webkit-transition: all .35s ease-in-out;
        }
    }

    &.is-open {
        .hamb-top,
        .hamb-bottom {
          top: 50%;
          margin-top: -2px;
        }
        .hamb-top {
          -webkit-transform: rotate(45deg);
          -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
        }
        .hamb-middle {
            display: none;
        }
        .hamb-bottom {
          -webkit-transform: rotate(-45deg);
          -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
        }
        &:before {
          content: '';
          display: block;
          width: 100px;
          font-size: 14px;
          color: #fff;
          line-height: 32px;
          text-align: center;
          opacity: 0;
          -webkit-transform: translate3d(0,0,0);
          -webkit-transition: all .35s ease-in-out;
        }
        &:hover:before {
          opacity: 1;
          display: block;
          -webkit-transform: translate3d(-100px,0,0);
          -webkit-transition: all .35s ease-in-out;
        }
    }
}