// meny list
@mixin menu {
    list-style-type: none;
    padding: 0.5em 0;
    margin: 0;

    > li {

        a {
            padding: 1em;
        }
    }
}

// horizontal list
@mixin horizontal-menu {
    @include menu;

    @include mq($mq-md) {
        display: table;
    }

    > li{
            @include mq($mq-md) {
                display:table-cell;
                &:last-child{
                    margin-right:0px;
                }
            }
        }
}

// nav-menu
@mixin nav-menu {
    @include horizontal-menu;

    li {
        text-align: center;
    }
}

// stretch menu
@mixin stretch-menu {
    @include horizontal-menu;

    @include mq($mq-md) {
        width: 100%;
    }
}

@mixin mobile-menu {

}

// off canvas menu toggle button
input[data-function*='swipe'] {
  position: absolute;
  opacity: 0;
}

label[data-function*='swipe'] {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 1;
  display: block;
  width: 38px;
  height: 38px;
  font: 38px/38px fontawesome;
  text-align: center;
  color: $off-canvas-hamburger;
  cursor: pointer;
  transform: translate3d(0,0,0);
  transition: transform .3s;
}
label[data-function*='swipe']:hover {
    color: darken($off-canvas-hamburger, 12%);
}

input[data-function*='swipe']:checked ~ label[data-function*='swipe'] {
  transform: translate3d($off-canvas-width,0,0);
}

input[data-function*='swipe']:checked ~ .content {
  transform: translate3d($off-canvas-width,0px,0px);
}

input[data-function*='swipe']:checked ~ .off-canvas {
  transform: translate3d(0px,0px,0px);
  .menu {
    li {
      width: 100%;
    }
  }
}

// offcanvas setup
html, body {
  height: 100%;
}

body {
  overflow-x: hidden;
}

.wrapper {
  display: flex;
  min-height: 100%;
}

.content {
  flex: 1;
  transform: translate3d(0,0,0);
  transition: transform .3s;
}

.off-canvas {
  transform: translate3d(-$off-canvas-width,0px,0px);
  position: fixed;
  width: $off-canvas-width;
  background: $off-canvas-bg;
  color: $off-canvas-color;
  left: 0;
  height: 100%;
  transition: all .3s;

    .menu {
        li {
            a {
                color: $off-canvas-color;
                display: block;
                padding: 0.5em 1em;
            }
        }
    }
}
