    /**
     * Creates the base structure of a date picker.
     * @member Ext.picker.Date
     */
    @mixin extjs-datepicker {
        .#{$prefix}datepicker {
            border: $datepicker-border;

            background-color: $datepicker-background-color;
            position: relative;

            a {
                -moz-outline: 0 none;
                outline: 0 none;

                color: $datepicker-monthpicker-item-color;
                text-decoration: none;

                border-width: 0;
            }
        }

        .#{$prefix}datepicker-inner,
        .#{$prefix}datepicker-inner td,
        .#{$prefix}datepicker-inner th {
            border-collapse: separate;
        }

        .#{$prefix}datepicker-header {
            position: relative;

            height: 26px;

            @if $datepicker-header-background-gradient {
                @include background-gradient($datepicker-header-background-color, $datepicker-header-background-gradient);
            } @else {
                background-color: $datepicker-header-background-color;
            }
        }

        .#{$prefix}datepicker-prev,
        .#{$prefix}datepicker-next {
            position: absolute;
            top: 5px;

            width: 18px;

            a {
                display: block;

                width: 16px;
                height: 16px;

                background-position: top;
                background-repeat: no-repeat;

                cursor: pointer;

                text-decoration: none !important;

                @include opacity(.7);

                &:hover {
                    @include opacity(1);
                }
            }
        }

        .#{$prefix}datepicker-next {
            right: 5px;

            a {
                background-image: theme-background-image($theme-name, $datepicker-next-image);
            }
        }

        .#{$prefix}datepicker-prev {
            left: 5px;

            a {
                background-image: theme-background-image($theme-name, $datepicker-prev-image);
            }
        }

        .#{$prefix}item-disabled .#{$prefix}datepicker-prev a:hover,
        .#{$prefix}item-disabled .#{$prefix}datepicker-next a:hover {
            @include opacity(.6);
        }

        .#{$prefix}datepicker-month {
            padding-top: 3px;

            .#{$prefix}btn,
            button,
            .#{$prefix}btn-tc,
            .#{$prefix}btn-tl,
            .#{$prefix}btn-tr,
            .#{$prefix}btn-mc,
            .#{$prefix}btn-ml,
            .#{$prefix}btn-mr,
            .#{$prefix}btn-bc,
            .#{$prefix}btn-bl,
            .#{$prefix}btn-br {
                background: transparent !important;
                border-width: 0 !important;
            }

            span {
                color: #fff !important;
            }

            .#{$prefix}btn-split-right {
                background-image: theme-background-image($theme-name, $datepicker-month-arrow-image);
                padding-right: 12px;
            }
        }

        .#{$prefix}datepicker-next {
            text-align: right;
        }

        .#{$prefix}datepicker-month {
            //width: 120px;
            text-align: center;

            button {
                color: $datepicker-monthpicker-color !important;
            }
        }

        table.#{$prefix}datepicker-inner {
            width: 100%;
            table-layout: fixed;

            th {
                width: 25px;
                height: 19px;

                padding: 0;

                color: $datepicker-th-color;
                font: $datepicker-th-font;
                text-align: $datepicker-th-text-align;

                border-bottom: 1px solid $datepicker-th-border-bottom-color;
                border-collapse: separate;

                @if $datepicker-th-background-gradient {
                    @include background-gradient($datepicker-th-background-color, $datepicker-th-background-gradient);
                } @else {
                    background-color: $datepicker-th-background-color;
                }

                cursor: default;

                span {
                    display: block;
                    padding-right: 7px;
                }
            }

            tr {
                height: 20px;
            }

            td {
                border: $datepicker-border-width $datepicker-border-style;
                height: $datepicker-td-height;
                border-color: $datepicker-background-color;
                text-align: right;
                padding: 0;
            }

            a {
                padding-right: 4px;

                display: block;

                zoom: 1;

                font: normal ceil($font-size * .9) $font-family;
                color: $datepicker-item-color;
                text-decoration: none;
                text-align: right;
            }

            .#{$prefix}datepicker-active {
                cursor: pointer;
                color: black;
            }

            .#{$prefix}datepicker-selected {
                a {
                    background: repeat-x left top;
                    background-color: $datepicker-selected-item-background-color;
                    border: 1px solid $datepicker-selected-item-border-color;
                }

                span {
                    font-weight: bold;
                }
            }

            .#{$prefix}datepicker-today {
                a {
                    border: $datepicker-border-width $datepicker-border-style;
                    border-color: $datepicker-today-item-border-color;
                }
            }

            .#{$prefix}datepicker-prevday,
            .#{$prefix}datepicker-nextday {
                a {
                    text-decoration: none !important;
                    color: #aaa;
                }
            }

            a:hover,
            .#{$prefix}datepicker-disabled a:hover {
                text-decoration: none !important;

                color: #000;

                background-color: $datepicker-item-hover-background-color;
            }

            .#{$prefix}datepicker-disabled a {
                cursor: default;
                background-color: #eee;
                color: #bbb;
            }
        }

        .#{$prefix}datepicker-footer,
        .#{$prefix}monthpicker-buttons {
            position: relative;

            border-top: $datepicker-border-width $datepicker-border-style $datepicker-footer-border-top-color;

            @if $datepicker-footer-background-gradient {
                @include background-gradient($datepicker-footer-background-color, $datepicker-footer-background-gradient);
            } @else {
                background-color: $datepicker-footer-background-color;
            }

            text-align: center;

            .#{$prefix}btn {
                position: relative;
                margin: 4px;
            }
        }

        .#{$prefix}item-disabled .#{$prefix}datepicker-inner a:hover {
            background: none;
        }

        // month picker
        .#{$prefix}datepicker .#{$prefix}monthpicker {
            position: absolute;
            left: 0;
            top: 0;
        }

        .#{$prefix}monthpicker {
            border: $datepicker-border;
            background-color: $datepicker-background-color;
        }

        .#{$prefix}monthpicker-months,
        .#{$prefix}monthpicker-years {
            float: left;

            height: $datepicker-monthpicker-height;
            width: 88px;
        }

        .#{$prefix}monthpicker-item {
            float: left;

            margin: 4px 0 5px 0;

            font: normal ceil($font-size * .9) $font-family;
            text-align: center;
            vertical-align: middle;

            height: 18px;
            width: 43px;

            border: 0 none;

            a {
                display: block;

                margin: 0 5px;

                text-decoration: none;

                color: $datepicker-monthpicker-item-color;

                border: $datepicker-monthpicker-item-border;

                line-height: 17px;

                &:hover {
                    background-color: $datepicker-monthpicker-item-hover-background-color;
                }

                &.#{$prefix}monthpicker-selected {
                    background-color: $datepicker-monthpicker-item-selected-background-color;
                    border: $datepicker-monthpicker-item-selected-border;
                }
            }
        }

        .#{$prefix}monthpicker-months {
            border-right: $datepicker-border;
            width: 87px;
        }

        .#{$prefix}monthpicker-years .#{$prefix}monthpicker-item {
            width: 44px;
        }

        .#{$prefix}monthpicker-yearnav {
            height: 28px;

            button {
                background-image: theme-background-image($theme-name, $datepicker-tool-sprite-image);
                height: 15px;
                width: 15px;
                padding: 0;
                margin: 6px 12px 5px 15px;
                border: 0;
                outline: 0 none;
                &::-moz-focus-inner {
                    border: 0;
                    padding: 0;
                }
            }
        }

        .#{$prefix}monthpicker-yearnav-next {
            background-position: 0 -120px;
        }

        .#{$prefix}monthpicker-yearnav-next-over {
            cursor: pointer;
            cursor: hand;
            background-position: -15px -120px;
        }

        .#{$prefix}monthpicker-yearnav-prev {
            background-position: 0 -105px;
        }

        .#{$prefix}monthpicker-yearnav-prev-over {
            cursor: pointer;
            cursor: hand;
            background-position: -15px -105px;
        }

        .#{$prefix}monthpicker-small {
            .#{$prefix}monthpicker-item {
                margin: 2px 0 2px 0;
            }

            .#{$prefix}monthpicker-yearnav {
                height: 23px;
            }

            .#{$prefix}monthpicker-months, .#{$prefix}monthpicker-years {
                height: 136px;
            }
        }

        @if $include-ie {
            .#{$prefix}quirks {
                .#{$prefix}ie7,
                .#{$prefix}ie8 {
                    .#{$prefix}monthpicker-buttons {
                        .#{$prefix}btn {
                            margin-top: 2px;
                        }
                    }
                }

                .#{$prefix}monthpicker-small .#{$prefix}monthpicker-yearnav button {
                    margin-top: 3px;
                    margin-bottom: 3px;
                }
            }

            .#{$prefix}ie6 .#{$prefix}monthpicker-small .#{$prefix}monthpicker-yearnav button {
                margin-top: 3px;
                margin-bottom: 3px;
            }
        }

        //nlg support
        @if not $supports-gradients or $compile-all {
            .#{$prefix}nlg {
                @if $datepicker-header-background-gradient != null {
                    .#{$prefix}datepicker-header {
                        background-image: theme-background-image($theme-name, 'datepicker/datepicker-header-bg.gif');
                        background-repeat: repeat-x;
                        background-position: top left;
                    }
                }

                @if $datepicker-footer-background-gradient != null {
                    .#{$prefix}datepicker-footer,
                    .#{$prefix}monthpicker-buttons {
                        background-image: theme-background-image($theme-name, 'datepicker/datepicker-footer-bg.gif');
                        background-repeat: repeat-x;
                        background-position: top left;
                    }
                }
            }
        }
    }