/**
 * Keyboard key touch
 * A simple stylesheet for rendering beautiful keyboard-style elements.

 * @author Michael Hüneburg http://michaelhue.com/keyscss
 * @link https://github.com/michaelhue/keyscss (commit 76bb603e921d0145362e0f60eabb79d4f69cbda0)
 *
 * @author Maxime Thirouin @MoOx maxime.thirouin@gmail.com
*/

// Base style, essential for every key
@mixin ui-keyboard-key-requirements($font-size: .85em, $line-height: 1, $font-family: "Lucida Grande")
{
    padding: .2em .3em;
    min-width: 1em;
    font: normal $font-size/$line-height $font-family, Lucida, Arial, sans-serif;
    text-align: center;
    @include border-radius(.25em);
    border: none;

    display: inline;
    display: inline-block;
    text-decoration: none;
    cursor: default;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    //@include user-select(none);

    &[title]
    {
        cursor: help;
    }
}

// it's will be nice to manage color schema with mixin like
// key-light, key-dark but, we can't @include them with a variable
// it's not yet possible to make a @include key-#{$color-schema};
@mixin ui-keyboard-key-color-schema($color-schema: light)
{
    @if ($color-schema == dark)
    {
        // Dark style for display on light background.
        background: rgb(80, 80, 80);
        @include background(linear-gradient(rgb(60, 60, 60), rgb(80, 80, 80)));
        color: rgb(250, 250, 250);
        text-shadow: -1px -1px 0 rgb(70, 70, 70);
        @include box-shadow(inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3));
    }
    @elseif ($color-schema == light)
    {
        // Light style for display on dark background
        background: rgb(250, 250, 250);
        @include background(linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255)));
        color: #444;
        text-shadow: 0 0 2px rgb(255, 255, 255);
        /*@include box-shadow(
            inset 0 0 1px #fff,
            inset 0 0 .4em rgb(200, 200, 200),
            0 .1em 0 rgb(130, 130, 130),
            0 .11em 0 rgba(#000, .4),
            0 .1em .11em rgba(#000, .9)
                );
        */
        @include box-shadow(
            inset 0 0 25px #e8e8e8,
            0 1px 0 #c3c3c3,
            0 2px 0 #c9c9c9,
            0 2px 3px #333
        );
        text-shadow: 0px 1px 0px #f5f5f5;
    }
}

@mixin ui-keyboard-key-rules-large($color-schema: light, $default: true)
{
    &,
    &.#{$color-schema},
    .#{$color-schema}-keys &
    {
        @include ui-keyboard-key-color-schema($color-schema);
    }
}

@mixin ui-keyboard-kbd($default-color-schema: light)
{
    $alternate-color-schema: dark;
    @if ($default-color-schema == dark)
    {
        $alternate-color-schema: light;
    }

    kbd,
    .kbd
    {
        @include ui-keyboard-key-requirements;
        @include ui-keyboard-key-rules-large($alternate-color-schema, false);
        @include ui-keyboard-key-rules-large($default-color-schema);
    }
}

@mixin ui-keyboard-key($default-color-schema: light)
{
    @include ui-keyboard-key-requirements;
    @include ui-keyboard-key-color-schema($default-color-schema);
}