/* Layout helpers
   ========================================================================== */

/**
 * Hide jQuery UI elements.
 */

.ui-helper-hidden {
    display: none !important;
}

/**
 * Hide jQuery UI text but still allow screen reader access.
 */

.ui-helper-hidden-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); // TODO: Deprecated - use `clip-path` when browser support is better.
    //clip-path: inset(50%); // TODO: Currently causes severe performance issues in Chrome.
    border: 0;
    white-space: nowrap;
}

/**
 * Normalize various rules to avoid style inheritance.
 */

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    list-style: none;
    font-size: 1rem;
    line-height: $base-line-height;
    text-decoration: none;
}

/**
 * Clearfix jQuery UI elements.
 */

.ui-helper-clearfix::after {
    content: "";
    display: table;
    clear: both;
    border-collapse: collapse;
}

/**
 * Normalize absolute positioning of jQuery UI elements to avoid misplacement.
 */

.ui-helper-zfix {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

/**
 * Make jQuery UI elements show above other elements.
 */

.ui-front {
    z-index: 100;
}


/* Component containers
   ========================================================================== */

/**
 * Normalize font size of nested jQuery UI widgets to avoid style inheritance.
 */

.ui-widget .ui-widget {
    font-size: 1rem;
}

/**
 * General style for jQuery widget content.
 */

.ui-widget-content {
    border: 1px solid $color-border;
    background-color: $color-background;
}

@include dark-mode {
    .ui-widget-content {
        border-color: $dark-color-border;
        background-color: $dark-color-background;
    }
}

/**
 * General style for jQuery widget headers.
 */

.ui-widget-header {
    @include gradient-linear($color-gradient-from, $color-gradient-to);

    font-weight: bold;
}

@include dark-mode {
    .ui-widget-header {
        @include gradient-linear($dark-color-gradient-to, $dark-color-gradient-from);
    }
}


/* Interaction states
   ========================================================================== */

/**
 * Default jQuery UI widget interaction state.
 */

.ui-state-default {
    border: 1px solid $color-border;
    background-color: $color-gradient-from;
    color: $color-text;
}

@include dark-mode {
    .ui-state-default {
        border-color: $dark-color-border-light;
        background-color: $dark-color-background-box;
        color: $dark-color-text;
    }
}

/**
 * Override hover/focus states for anchors in certain situations.
 */

a.ui-state-default:hover,
a.ui-state-default:focus {
    color: $color-text;
    text-decoration: none;
}

@include dark-mode {
    a.ui-state-default:hover,
    a.ui-state-default:focus {
        color: $dark-color-text;
    }
}

/**
 * Hover jQuery UI widget interaction states.
 */

.ui-state-hover {
    border-color: $color-border-extra-dark;
    background-color: $color-background-box;
}

@include dark-mode {
    .ui-state-hover {
        border-color: $dark-color-border;
        background-color: tint($dark-color-background-box, 5%);
    }
}

/**
 * Focus jQuery UI widget interaction states.
 */

.ui-state-focus {
    border-color: $color-link-focus;
    outline: 0;

    a {
        outline: 0;
    }
}

@include dark-mode {
    .ui-state-focus {
        border-color: $dark-color-link-focus;
    }
}

/**
 * Active jQuery UI widget interaction state.
 */

.ui-state-active:not(.ui-button) {
    border-color: $color-border;
    background-color: $color-background;
}

@include dark-mode {
    .ui-state-active:not(.ui-button) {
        border-color: $dark-color-border;
        background-color: $dark-color-gradient-from;
    }
}

/**
 * Highlight colour for jQuery UI widgets currently in 'selecting' state.
 */

.ui-selecting {
    background-color: $color-selecting;
}

@include dark-mode {
    .ui-selecting {
        background-color: $dark-color-selecting;
    }
}

/**
 * Highlight colour for jQuery UI widgets currently in 'selected' state.
 */

.ui-selected {
    background-color: $color-selected;
}

@include dark-mode {
    .ui-selected {
        background-color: $dark-color-selected;
    }
}


/* Interaction cues
   ========================================================================== */

/**
 * jQuery UI highlight cue colouring.
 */

.ui-state-highlight {
    border: 1px solid $color-warning-border;
    background-color: $color-warning-background;
}

@include dark-mode {
    .ui-state-highlight {
        border-color: $dark-color-warning-border;
        background-color: $dark-color-warning-background;
    }
}

/**
 * jQuery UI error cue colouring.
 */

.ui-state-error {
    border: 1px solid $color-error-border;
    background-color: $color-error-background;
    color: $color-error-text;
}

@include dark-mode {
    .ui-state-error {
        border-color: $dark-color-error-border;
        background-color: $dark-color-error-background;
        color: $dark-color-error-text;
    }
}

/**
 * Visually prioritized jQuery UI text.
 */

.ui-priority-primary {
    font-weight: bold;
}

/**
 * Visually non-prioritized jQuery UI text.
 */

.ui-priority-secondary {
    opacity: 0.66;
    font-weight: normal;
}

/**
 * Visually disabled jQuery UI text and anchors.
 */

.ui-state-disabled:not(.ui-button) {
    opacity: 0.33;
    background-image: none;
    cursor: default !important;
    pointer-events: none;

    a {
        text-decoration: none;
        cursor: default;
    }
}

@include dark-mode {
    .ui-state-disabled:not(.ui-button) {
        opacity: 0.25;
    }
}


/* Overlays
   ========================================================================== */

/**
 * Dark, semi-transparent container overlays.
 *
 * Example HTML:
 *
 * <div class="ui-widget-overlay"></div>
 */

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(#000000, 0.75);
}

@include dark-mode {
    .ui-widget-overlay {
        background: rgba(#000000, 0.66);
    }
}


/* Shadows
   ========================================================================== */

/**
 * Faux shadows via `background-color`.
 *
 * Example HTML:
 *
 * <div class="ui-widget-shadow"></div>
 */

.ui-widget-shadow {
    box-shadow: $standard-shadow;
}

@include dark-mode {
    .ui-widget-shadow {
        box-shadow: $dark-standard-shadow;
    }
}