//
// Tweaks for jQuery UI
// --------------------------------------------------


/**
 * Component containers
 */

.ui-widget {
    &,
    input,
    select,
    textarea,
    button
    {
        font-size: inherit;
        font-family: inherit;
    }
}


/**
 * Widgets
 */

.ui-widget-content {
    color: $text-color;
    background: $body-bg;
    border: 1px solid $panel-border;

    a {
        color: $text-color;
    }
}

.ui-widget-header {
    color: $header-text;
    background: $header-bg;
    border: 0 none;
    font-weight: bold;

    a,
    button {
        &.ui-state-default {
            color: $header-text;
            background: $header-bg;
            border-color: $header-bg;
        }

        &.ui-state-hover,
        &.ui-state-focus {
            background: darken($header-bg, 10%);
            border-color: darken($header-bg, 12%);
        }

        .ui-icon {
            background-image: url("/stylesheets/jquery/images/ui-icons_ffffff_256x240.png");
        }
    }
}


/**
 * Interaction states
 */

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    font-weight: normal;
    color: $component-color;
    background: $component-bg;
    border: 1px solid $component-border;
    box-shadow: none;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: $component-color;
    text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid $component-active-border;
    background: $component-active-bg;
    font-weight: normal;
    color: $component-active-color;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
    color: $component-active-color;
    text-decoration: none;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    border: 1px solid $component-active-border;
    background: $component-active-bg;
    font-weight: normal;
    color: $component-active-color;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: $component-active-color;
    text-decoration: none;
}


/**
 * Menu (e.g. autocomplete)
 */

.ui-menu-item {
    border-radius: $panel-border-radius;
}


/**
 * Dialogs
 */

.modal {
    background: $body-bg;
    z-index: 50;

    h3.title {
        display: none;
    }

    p.buttons {
        text-align: right;
        margin-bottom: 0;
    }
}

.ui-dialog {
    &.ui-widget-content {
        padding: 3px;
        border: 0 none;
        box-shadow: $panel-shadow;
    }

    .ui-dialog-titlebar-close {
        right: .5em;
    }
}

.ui-widget-overlay {
    background: #000;
}


/**
 * Datepicker
 */

img.ui-datepicker-trigger {
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
}

.ui-datepicker {
    padding: 3px;
    box-shadow: $panel-shadow;

    .ui-datepicker-header {
        padding: .3em;
    }

    .ui-datepicker-prev {
        left: .3em;
    }

    .ui-datepicker-next {
        right: .3em;
    }

    .ui-datepicker-prev,
    .ui-datepicker-next {
        top: .3em;
        border: 0 none;
        background: transparent;
    }

    .ui-datepicker-title {
        margin: 0 (1.8em + .3em);
    }

    select.ui-datepicker-month,
    select.ui-datepicker-year {
        width: 49%;
        margin: 0;
        height: 1.8em;
    }

    select.ui-datepicker-year {
        margin-left: 1%;
    }

    .ui-datepicker-calendar {
        table-layout: fixed;

        td {
            text-align: right;

            a {
                padding: .25em .2em .25em 0;
            }

            &.ui-datepicker-week-col {
                padding-right: $table-condensed-cell-padding;
            }
        }
    }
}

.ui-datepicker-today {
    .ui-state-highlight {
        color: $component-color;
        border-color: $component-active-border;
        background: $component-bg;
    }

    .ui-state-hover {
        background: $component-active-bg;
        color: $component-active-color;
    }
}

.ui-datepicker-current-day {
    .ui-state-active {
        color: $tooltip-text;
        background: $tooltip-bg;
        border-color: $tooltip-border;
    }
}