// Settings
// ==================================================
$hamburger-padding-x: 15px !default
$hamburger-padding-y: 12px !default
$hamburger-layer-width: 30px !default
$hamburger-layer-height: 2px !default
$hamburger-layer-spacing: 6px !default
$hamburger-layer-color: #000 !default
$hamburger-layer-border-radius: 4px !default
$hamburger-hover-opacity: 0.7 !default
$hamburger-active-layer-color: $hamburger-layer-color !default
$hamburger-active-hover-opacity: $hamburger-hover-opacity !default

$hamburger-hover-use-filter: false !default
$hamburger-hover-filter: opacity(50%) !default
$hamburger-active-hover-filter: $hamburger-hover-filter !default

$hamburger-types: boring !default

.hamburger
  padding: $hamburger-padding-y $hamburger-padding-x
  display: inline-block
  cursor: pointer

  transition-property: opacity, filter
  transition-duration: 0.15s
  transition-timing-function: linear

  // Normalize (<button>)
  font: inherit
  color: inherit
  text-transform: none
  background-color: transparent
  border: 0
  margin: 0
  overflow: visible
  display: none

  @media #{$below}
    display: block

  &:hover
    @if $hamburger-hover-use-filter == true
      filter: $hamburger-hover-filter

    @else
      opacity: $hamburger-hover-opacity


  &.is-active
    &:hover
      @if $hamburger-hover-use-filter == true
        filter: $hamburger-active-hover-filter

      @else
        opacity: $hamburger-active-hover-opacity


    .hamburger-inner,
    .hamburger-inner::before,
    .hamburger-inner::after
      background-color: $hamburger-active-layer-color


.hamburger-box
  width: $hamburger-layer-width
  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2
  display: inline-block
  position: relative


.hamburger-inner
  display: block
  top: 50%
  margin-top: $hamburger-layer-height / -2

  &,
  &::before,
  &::after
    width: $hamburger-layer-width
    height: $hamburger-layer-height
    background-color: $hamburger-layer-color
    border-radius: $hamburger-layer-border-radius
    position: absolute
    transition-property: transform
    transition-duration: 0.15s
    transition-timing-function: ease


  &::before,
  &::after
    content: ""
    display: block


  &::before
    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1


  &::after
    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1


@if index($hamburger-types, boring)
  /*
   * Boring
   */
  .hamburger--boring
    .hamburger-inner
      &,
      &::before,
      &::after
        transition-property: none


    &.is-active
      .hamburger-inner
        transform: rotate(45deg)

        &::before
          top: 0
          opacity: 0


        &::after
          bottom: 0
          transform: rotate(-90deg)