/* -----------------------------------------------------------------------------

  HAMBURGER ICONS COMPONENT

----------------------------------------------------------------------------- */

// vars

@navbar-toggle-width: 72px; // The width of the button area
@navbar-toggle-height: 64px; // The height of the button area
@bar-thickness: 2px; // The thickness of the button bars
@navbar-toggle-pad: 18px; // The left/right padding between button area and bars.
@navbar-toggle-bar-space: 8px; // The spacing between button bars
@navbar-toggle-transistion-duration: 0.2s; // The transition duration

/**
 * Toggle Switch Globals
 *
 * All switches should take on the class `c-hamburger` as well as their
 * variant that will give them unique properties. This class is an overview
 * class that acts as a reset for all versions of the icon.
 */

.navbar-toggle {

  position: absolute;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: @navbar-toggle-width;
  height: @navbar-toggle-height;
  font-size: 0;
  text-indent: -9999px;
  appearance: none;
  box-shadow: none;
  border-radius: 0;
  border: none;
  cursor: pointer;

}

.navbar-toggle:focus {
  outline: none;
}

.navbar-toggle {

  span {
    display: block;
    position: absolute;
    top: (@navbar-toggle-height / 2) - (@bar-thickness / 2);
    left: @navbar-toggle-pad;
    right: @navbar-toggle-pad;
    height: @bar-thickness;
    background-color: transparent;

    transition: background 0s @navbar-toggle-transistion-duration;
  }

  span::before,
  span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: @bar-thickness;
    background-color: @navbar-default-toggle-icon-bar-bg;

    content: "";
    transition-duration: @navbar-toggle-transistion-duration, @navbar-toggle-transistion-duration;
    transition-delay: 0s, @navbar-toggle-transistion-duration;
  }



  span::before {
    top: 0;
    transition-property: top, transform;
    transform: rotate(45deg);
  }

  span::after {
    bottom: 0;
    transition-property: bottom, transform;
    transform: rotate(-45deg);
  }


  &.collapsed {

    span {
      background-color: @navbar-default-toggle-icon-bar-bg;
    }

    span::before {
      top: -@bar-thickness - @navbar-toggle-bar-space;

      transform: inherit;
    }

    span::after {
      bottom: -@bar-thickness - @navbar-toggle-bar-space;

      transform: inherit;
    }

    span::before,
    span::after {

      transition-delay: @navbar-toggle-transistion-duration, 0s;
    }
  }

}
