// how to include md vars?
// src/core/style/variables.scss
$font-family: Roboto, 'Helvetica Neue', sans-serif !default;
$baseline-grid: 8px !default;
$z-index-keyboard: 110 !default;

$swift-ease-out-duration: 0.4s !default;
$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;

$swift-ease-in-duration: 0.3s !default;
$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;

// md-keyboard
$keyboard-horizontal-padding: 2 * $baseline-grid !default;
$keyboard-vertical-padding: 1 * $baseline-grid !default;
$keyboard-icon-after-margin: 4 * $baseline-grid !default;
$keyboard-list-item-height: 6 * $baseline-grid !default;
$keyboard-hidden-bottom-padding: 80px !default;
$keyboard-header-height: 7 * $baseline-grid !default;
$keyboard-grid-font-weight: 400 !default;

md-keyboard {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: $keyboard-vertical-padding $keyboard-horizontal-padding $keyboard-vertical-padding + $keyboard-hidden-bottom-padding $keyboard-horizontal-padding;
    z-index: $z-index-keyboard;

    border-top-width: 1px;
    border-top-style: solid;

    transform: translate3d(0, $keyboard-hidden-bottom-padding, 0);
    transition: $swift-ease-out;
    transition-property: transform;

    // should be provided by theme
    background-color: #FAFAFA;
    border-top-color: #E0E0E0;

    &.md-has-header {
        padding-top: 0;
    }

    &.ng-enter {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    &.ng-enter-active {
        opacity: 1;
        display: block;
        transform: translate3d(0, $keyboard-hidden-bottom-padding, 0) !important;
        transition: $swift-ease-out;
    }

    &.ng-leave-active {
        transform: translate3d(0, 100%, 0) !important;
        transition: $swift-ease-in;
    }

    .md-subheader {
        background-color: transparent;
        font-family: $font-family;
        line-height: $keyboard-header-height;
        padding: 0;
        white-space: nowrap;
    }

    .md-button {
        min-width: 100%;
        text-transform: none;

        &.key-caps {
            &:before {
                content: '';
                position: absolute;
                top: 5px;
                left: 5px;
                display: inline-block;
                width: 3px;
                height: 3px;
                border-radius: 100%;
                background-color: #ccc;
            }
            &.locked:before {
                background-color: #0f0;
                box-shadow: 0 0 3px #adff2f;
            }
        }
    }

    md-inline-icon {
        display: inline-block;
        height: 24px;
        width: 24px;
        fill: #444;
    }

    md-list-item {
        display: flex;
        outline: none;

        &:hover {
            cursor: pointer;
        }
    }

    &.md-grid {
        padding-left: 3 * $baseline-grid;
        padding-right: 3 * $baseline-grid;
        padding-top: $baseline-grid;
    }

    .layout-row > .flex {
        border: $baseline-grid / 2 solid transparent;

        &:not(.key-char) {
            width: auto;
        }
        &.key-bksp,
        &.key-caps {
            min-width: 15%;
        }
        &.key-tab,
        &.key-shift,
        &.key-enter {
            min-width: 10%;
        }
        &.key-space {
            text-align: center;

            & > span {
                max-width: 80%;
            }
        }

        & > span {
            display: inline-block;
            width: 100%;

            .md-button {
                margin: 0;
            }
        }
    }

    & ~ .md-scroll-mask {
        pointer-events: none;
    }
}

// IE only
@media screen and (-ms-high-contrast: active) {
    md-keyboard {
        border: 1px solid #fff;
    }
}