// toggle-menu - An SCSS mixin for pure CSS responsive toggle menus
// 
// Copyright (C) 2017  Antonio Ospite <ao2@ao2.it>
// 
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// 
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
// 
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.

$toggle-menu-transition-delay: .25s;

@mixin _toggle-menu-common($show-menu-id) {

  /* common fallback style for when :target is not supported */
  .toggle-menu {
    .toggle-menu__target {
      display: none;
    }

    .toggle-menu__button--show {
      display: none;
    }

    .toggle-menu__button--hide {
      display: none;
    }

    .toggle-menu__list .toggle-menu__item {
      height: auto;
    }
  }

  /* common mobile-first style for when :taget is supported */
  body:not(:target) .toggle-menu {
    .toggle-menu__list .toggle-menu__item {
      overflow: hidden;
      height: 0;
      -moz-transition: height $toggle-menu-transition-delay;
      -ms-transition: height $toggle-menu-transition-delay;
      -o-transition: height $toggle-menu-transition-delay;
      -webkit-transition: height $toggle-menu-transition-delay;
      transition: height $toggle-menu-transition-delay;
    }

    .toggle-menu__button--show {
      display: block;
    }

    .toggle-menu__button--hide {
      display: none;
    }
  }

  /* common big screen style for when :target is supported */
  @media screen and (min-width: 48.25em) {
    body:not(:target) .toggle-menu {
      .toggle-menu__list .toggle-menu__item {
        display: inline-block;
        overflow: inherit;
      }
    }
  }
}

@mixin _toggle-menu-theme {

  /* toggle-menu theming */
  .toggle-menu {

    a {
      color: white;
      text-decoration: none;
    }

    .toggle-menu__button {
      cursor: pointer;
      line-height: 2em;
      padding: .5em;
      font-weight: bold;

      &:after {
        content: icon(hamburger);
        font-size: 2em;
        float: right;
      }
    }

    .toggle-menu__button--show {
      background-color: red;
    }

    .toggle-menu__button--hide {
      background-color: darkred;
      &:after {
        content: icon(cross);
      }
    }

    .toggle-menu__list {
      background-color: orange;
      list-style-type: none;
      margin-top: 0;
      padding: 0;
    }

    .toggle-menu__list .toggle-menu__item {
      a {
        color: black;
        padding: .5em 1em;
        display: block;

      }
      :hover {
        background-color: yellow;
      }
    }
  }
}


$imported-once: false !default;
@mixin toggle-menu-common($show-menu-id) {
  $imported-once: $imported-once !global;
  @if ($imported-once == false) {
    $imported-once: true !global;
    @include _toggle-menu-common($show-menu-id);
    @include _toggle-menu-theme;
  }
}

@mixin toggle-menu($show-menu-id) {

  @include toggle-menu-common($show-menu-id);

  /* mobile-first style for ##{$show-menu-id} when :target is supported */
  body:not(:target) .toggle-menu {
    ##{$show-menu-id}:target {
      ~ .toggle-menu__list .toggle-menu__item {
        // NOTE: for the transition animation to work 'height' cannot be auto.
        height: 2em;
        -moz-transition: height $toggle-menu-transition-delay;
        -ms-transition: height $toggle-menu-transition-delay;
        -o-transition: height $toggle-menu-transition-delay;
        -webkit-transition: height $toggle-menu-transition-delay;
        transition: height $toggle-menu-transition-delay;
      }

      ~ .toggle-menu__button--show {
        display: none;
      }

      ~ .toggle-menu__button--hide {
        display: block;
      }
    }
  }

  /* big screen style for ##{$show-menu-id} when :target is supported */
  @media screen and (min-width: 48.25em) {
    body:not(:target) .toggle-menu {
      ##{$show-menu-id}, ##{$show-menu-id}:target {
        ~ .toggle-menu__list .toggle-menu__item {
          height: auto;
        }

        ~ .toggle-menu__button--show {
          display: none;
        }

        ~ .toggle-menu__button--hide {
          display: none;
        }
      }
    }
  }
}