/*
*= require_self
*/

@import "alchemy/defaults";

@mixin transition {
  -webkit-transition: left 0.15s ease-in-out;
  -moz-transition: left 0.15s ease-in-out;
  -ms-transition: left 0.15s ease-in-out;
  -o-transition: left 0.15s ease-in-out;
  transition: left 0.15s ease-in-out;
}

@mixin bounce {
  -webkit-transition-timing-function: cubic-bezier(0, 0.5, .5, 1.3);
  -moz-transition-timing-function: cubic-bezier(0, 0.5, .5, 1.3);
  -ms-transition-timing-function: cubic-bezier(0, 0.5, .5, 1.3);
  -o-transition-timing-function: cubic-bezier(0, 0.5, .5, 1.3);
  transition-timing-function: cubic-bezier(0, 0.5, .5, 1.3);
}

@mixin bottom-right-rounded-border {
  $side: bottom-right;
  $radius: 3px;
  -webkit-border-#{$side}-radius: $radius;
  -moz-border-radius-#{$side}: $radius;
  -ms-border-#{$side}-radius: $radius;
  -o-border-#{$side}-radius: $radius;
  border-#{$side}-radius: $radius;
}

@mixin box-shadow {
  $shadow: 0px 0px 4px $dark-gray;
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  -ms-box-shadow: $shadow;
  -o-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin box-sizing($box-sizing-type: content-box) {
  -webkit-box-sizing: $box-sizing-type;
  -moz-box-sizing: $box-sizing-type;
  box-sizing: $box-sizing-type;
}

#alchemy_menubar {
  position: fixed;
  top: 0;
  left: -319px;
  width: 312px;
  z-index: 10000;
  background: $light-gray;
  @include transition;
  @include bounce;
  @include bottom-right-rounded-border;
  @include box-shadow;
  @include box-sizing;
  border-right: $default-border;
  border-bottom: $default-border;
  line-height: 8 * $default-padding;
  height: 8 * $default-padding;
  padding: 4px 40px 4px 8px;
  overflow: hidden;

  * {
    @include box-sizing;
  }

  &:hover {
    left: 0;
    @include transition;
  }

  &:after {
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    right: 10px;
    top: 8px;
    background: image-url('alchemy/icons.png') -240px 0;
  }

  ul {
    padding: 0;
    margin: 0;
    height: 32px;

    li {
      height: 32px;
      margin: 0 $default-padding 0 0;
      padding: 5px 0 0 0;
      display: inline;
      display: inline-block;
      list-style-type: none;

      a {
        @include button-styles;
        display: block;
        line-height: 16px;
        text-align: center;
        padding: 2px 4px;
        width: 90px;
        text-decoration: none;
        outline: none;
        white-space: nowrap;

        &:hover {
          @include button-hover-styles;
        }

        &:active {
          outline: none;
        }
      }
    }
  }
}