@import "compass/css3";

.sidr {
    /* Default Settings */
    display: none;
    position: absolute;
    position: fixed;
    top: 0;
    height: 100%;
    z-index: 999999;
    width: 260px;
    overflow-x: none;
    overflow-y: auto;

    .sidr-inner {
        padding: 0 0 15px;

        > p {
            margin-left: 15px;
            margin-right: 15px;
        }
    }

    &.right {
        left: auto;
        right: -260px;
    }

    &.left {
        left: -260px;
        right: auto;
    }

    /* Theme Settings */
    font-family: $sidr-font-family;
    font-size: $sidr-font-size;
    background: $sidr-background;
    color: $sidr-text-color;
    @include single-box-shadow($sidr-background-shadow-color, 0, 0, 5px, 5px, inset);

    h1, h2, h3, h4, h5, h6 {
        font-size: $sidr-font-size - 4;
        font-weight: normal;
        padding: 0 15px;
        margin: 0 0 5px;
        color: $sidr-text-color;
        line-height: 24px;
        @include background-image(linear-gradient(lighten($sidr-background, 10%), darken($sidr-background, 10%)));
        @include single-box-shadow(rgba(#000, .2), 0, 5px, 5px, 3px);
    }

    p {
        font-size: $sidr-font-size - 2;
        margin: 0 0 12px;
        a {
            color: rgba($sidr-text-color, .9);
        }
    }

    > p {
        margin-left: 15px;
        margin-right: 15px;
    }

    ul {
        display: block;
        margin: 0 0 15px;
        padding: 0;
        border-top: 1px solid darken($sidr-background, 10%);
        border-bottom: 1px solid lighten($sidr-background, 10%);

        li {
            display: block;
            margin: 0;
            line-height: 48px;
            border-top: 1px solid lighten($sidr-background, 10%);
            border-bottom: 1px solid darken($sidr-background, 10%);

            &:hover,
            &.active,
            &.sidr-class-active {
                border-top: none;
                line-height: 49px;

                > a, > span {
                    @include single-box-shadow($sidr-background-shadow-color, 0, 0, 15px, 3px, inset);
                }
            }

            a, span {
                padding: 0 15px;
                display: block;
                text-decoration: none;
                color: $sidr-text-color;
            }

            ul {
                border-bottom: none;
                margin: 0;
                li {
                    line-height: 40px;
                    font-size: $sidr-font-size - 2;

                    &:last-child {
                        border-bottom: none;
                    }

                    &:hover,
                    &.active,
                    &.sidr-class-active {
                        border-top: none;
                        line-height: 41px;

                        > a, > span {
                            @include single-box-shadow($sidr-background-shadow-color, 0, 0, 15px, 3px, inset);
                        }
                    }

                    a, span {
                        color: rgba($sidr-text-color, .8);
                        padding-left: 30px;
                    }
                }
            }
        }
    }

    form {
        margin: 0 15px;
    }

    label {
        font-size: $sidr-font-size - 2;
    }

    input[type="text"],
    input[type="password"],
    input[type="date"],
    input[type="datetime"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="time"],
    input[type="url"],
    textarea, select {
        width: 100%;
        font-size: $sidr-font-size - 2;
        padding: 5px;
        @include box-sizing(border-box);
        margin: 0 0 10px;
        @include border-radius(2px);
        border: none;
        background: rgba(#000, .1);
        color: rgba($sidr-text-color, .6);
        display: block;
        clear: both;
    }

    input[type=checkbox] {
        width: auto;
        display: inline;
        clear: none;
    }

    input[type=button],
    input[type=submit] {
        color: $sidr-background;
        background: $sidr-text-color;

        &:hover {
            background: rgba($sidr-text-color, .9);
        }
    }
}
