/* Globally shared layout
   ========================================================================== */

/**
 * 1. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
    /* 1 */
    text-size-adjust: 100%;
}

/**
 * Hide content during 'not ready'.
 */

@supports (display: flex) { // workaround for IE 11 (see https://github.com/textpattern/textpattern/issues/1701).
    .not-ready main {
        opacity: 0;
    }
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    /* 1 */
    box-sizing: content-box;
    height: 0;
    margin: 1.5em 0;
    clear: both; // make sure any floats above `hr` are cleared
    /* 2 */
    overflow: visible;
    border: 0; // remove the default `hr` border
    border-bottom: 1px solid $color-border;

    &.secondary {
        margin: 0.33em 0;
        border-style: dashed;
    }
}

@include dark-mode {
    hr {
        border-bottom-color: $dark-color-border;
    }
}

/**
 * Hide text but still allow screen reader access.
 *
 * Example HTML:
 *
 * <h1 class="txp-accessibility">
 */

.txp-accessibility {
    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;
}

/**
 * Contain width of user-definable content, to avoid potential layout breakage.
 */

.txp-contain {
    max-width: 30em; // 390px / 13px
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**
 * Drop down lists.
 *
 * 1. Ensure dropdowns are hidden at page load (prevents content 'jumping').
 *
 * <ul class="txp-dropdown">
 *     <li class="txp-dropdown-toggle-all">
 *         <div>
 *             <label><input class="checkbox" type="checkbox"> Toggle all/none selected</label>
 *         </div>
 *     </li>
 *     <li>
 *         <div>
 *             <label><input class="checkbox active" type="checkbox"> ID#</label>
 *         </div>
 *     </li>
 * </ul>
 */

.txp-dropdown {
    /* 1 */
    display: none;
    position: absolute;
    z-index: 100;
    width: 18em; // 234px / 13px

    .checkbox {
        margin: 0.153846153846154em; // 2px / 13px
    }
}

.txp-dropdown-toggle-all {
    border-bottom: 1px solid $color-border-light;
}

@include dark-mode {
    .txp-dropdown-toggle-all {
        border-bottom-color: $dark-color-border-light;
    }
}

/**
 * Search widget at top of lists.
 *
 * Appears on:
 *
 * List panels.
 *
 * Example HTML:
 *
 * <form class="txp-search">
 *     <span class="txp-search-clear"><a>Clear search</a></span>
 *     <input class="txp-search-input" type="search" size="24">
 *     <span class="txp-search-buttons">
 *         <button class="txp-search-button">Search</button>
 *         <button class="txp-search-options">Search options</button>
 *     </span>
 * </form>
 */

.txp-search {
    display: flex;
    position: relative;
    justify-content: flex-end;
    margin: 1em 0;
    float: right;

    // Ensure the 2 buttons stay together.

    .ui-controlgroup {
        flex-wrap: nowrap;
    }

    // Ensure search dropdown lays above Column display options dropdown.

    .txp-dropdown {
        z-index: 101;
    }

    [dir="rtl"] & {
        float: left;
    }
}

.txp-search-input {
    max-width: calc(100% - 5.5rem);
}

.txp-search-clear {
    flex: 1;
    margin: auto 0.5em;
    text-align: right;

    [dir="rtl"] & {
        text-align: left;
    }
}

/**
 * Actions at top of listings.
 *
 * Appears on:
 *
 * List panels.
 *
 * Example HTML:
 *
 * <div class="txp-control-panel">
 *     Content
 * </div>
 */

.txp-control-panel {
    margin-bottom: 1em;

    > * {
        margin: 0.5em 0.5em 0.5em 0;

        &:last-child {
            margin-right: 0;
        }
    }

    form {
        display: inline-block;
    }

    textarea {
        margin-bottom: 1em;
    }
}

/**
 * Upload forms inline and as part of a `.txp-form-field` group.
 *
 * Appears on:
 *
 * List panels (inline) and edit panels.
 *
 * Example HTML:
 *
 * <div class="inline-file-uploader">
 *     <label>Upload file</label>
 *     <input type="file" multiple="multiple">
 *     <span class="inline-file-uploader-actions">
 *         <label for="file_category">Category</label>
 *         <select id="file_category" name="category">
 *             <option>&nbsp;</option>
 *             <option>File example category</option>
 *         </select>
 *     </span>
 *     <span class="inline-file-uploader-actions">
 *         <input type="reset" value="Reset">
 *         <input type="submit" value="Upload">
 *     </span>
 * </div>
 *
 * <div class="txp-form-field file-uploader">
 *     <div class="txp-form-field-label"><label>Upload file</label></div>
 *     <div class="txp-form-field-value">
 *         <input type="file">
 *         <span class="inline-file-uploader-actions">
 *             <input type="reset" value="Reset">
 *             <input type="submit" value="Upload">
 *         </span>
 *     </div>
 * </div>
 */

.inline-file-uploader {
    margin-bottom: -0.5em;

    > * {
        margin-bottom: 0.5em;
    }
}

.txp-form-field.file-uploader {
    margin-bottom: -0.5em;

    .txp-form-field-value > * {
        margin-bottom: 1em;
    }
}

.inline-file-uploader-actions {
    display: inline-block;
}

/**
 * Swap float/margin positions in RTL languages.
 */

[dir="rtl"] .txp-control-panel > * {
    margin: 0.5em 0 0.5em 0.5em;
}

/**
 * List display options at top of listings.
 *
 * Appears on:
 *
 * List panels.
 *
 * Example HTML:
 *
 * <div class="txp-list-options">
 *     <a>List view</a>
 *     <a>Grid view</a>
 *     <a>Column display options</a>
 * </div>
 */

.txp-list-options {
    position: relative;
    flex-grow: 1;
    margin: 1em 0;
    text-align: right;

    > ul {
        text-align: left;
    }

    > *:not(ul) {
        margin: 0 0 0 1em;
        white-space: nowrap;
        user-select: none;
    }

    form {
        display: inline-block;
    }
}

/**
 * Swap float/margin positions in RTL languages.
 */

[dir="rtl"] .txp-list-options {
    text-align: left;

    > ul {
        text-align: right;
    }

    > *:not(ul) {
        margin: 0 1em 0 0;
    }
}

/**
 * Additonal action links ('Duplicate', 'View', etc.) on some panels.
 *
 * Appears on:
 *
 * Article write/edit panel, pages panel, forms panel, styles panel.
 *
 * Example HTML:
 *
 * <p class="txp-actions">
 *     <a class="txp-article-view">View</a>
 *     <a class="txp-clone">Duplicate</a>
 *     <a class="txp-new">Create new</a>
 * </p>
 */

.txp-actions a {
    display: inline-block;
    margin: 0.5em 1em 0 0;

    &:last-child {
        margin: 0.5em 0 0;
    }
}

/**
 * Swap margin positions in RTL languages.
 */

[dir="rtl"] .txp-actions a {
    margin: 0.5em 0 0 1em;

    &:last-child {
        margin: 0.5em 0 0;
    }
}

/**
 * Remove top margin when inside a dialog box.
 */

.ui-dialog .txp-actions {
    margin-top: 0;
}

/**
 * Inline the action links.
 *
 * Appears on:
 *
 * Article pages panel, forms panel, styles panel.
 */

:not(.txp-edit) .txp-actions-inline {
    margin-top: 1.30769230769231em; // 17px / 13px
    float: right;
}

.txp-edit .txp-actions-inline {
    position: absolute;
    top: 1em;
    right: 1em;
    margin-top: 0;

    a {
        margin-top: 0;
    }
}

/**
 * Swap position in RTL languages.
 */

[dir="rtl"] .txp-actions-inline {
    float: left;
}

[dir="rtl"] .txp-edit .txp-actions-inline {
    right: auto;
    left: 1em;
}

/**
 * AJAX spinners.
 *
 * Example HTML:
 *
 * <span class="spinner ui-icon ui-icon-refresh"></span>
 */

span.spinner {
    animation: spinning linear 1s infinite;
}

/**
 * Parent container for multi-edit `select` widget at bottom of listings.
 *
 * Appears on:
 *
 * List panels.
 *
 * Example HTML:
 *
 * <div class="multi-edit">
 *     <select>
 *         <option selected="selected">With selected...</option>
 *         <option>Change author</option>
 *         <option>Duplicate</option>
 *         <option>Delete</option>
 *     </select>
 * </div>
 */

.multi-edit {
    position: sticky;
    z-index: 20;
    bottom: 0;
    margin: 1em 0 0;
    padding: 0.3076923em 0; // 4px / 13px
    background: $color-background;
    box-shadow: 0 -1em 1em -0.5em $color-background;
}

@include dark-mode {
    .multi-edit {
        background: $dark-color-background;
        box-shadow: 0 -1em 1em -0.5em $dark-color-background;
    }
}

/**
 * Hide secondary `select` element on multi-edit `select` widget.
 *
 * Display is controlled via JavaScript (hidden by default until an action is
 * selected by user, then overrode by `.multi-step`).
 *
 * Appears on:
 *
 * List panels.
 *
 * Example HTML:
 *
 * <div class="multi-edit">
 *     <select>
 *         <option selected="selected">With selected...</option>
 *         <option>Change author</option>
 *         <option>Duplicate</option>
 *         <option>Delete</option>
 *     </select>
 *     <div class="multi-option">
 *         <select name="order">
 *             <option value="1">1</option>
 *             <option value="2">1</option>
 *             <option value="3" selected="selected">5</option>
 *         </select>
 *     </div>
 *     <input type="submit" value="Go">
 * </div>
 */

.multi-option {
    display: none;
}

/**
 * Show secondary `select` element on multi-edit `select` widget.
 *
 * Display is controlled via JavaScript (class not present until an action is
 * selected by user, then overrides `.multi-edit`).
 *
 * Appears on:
 *
 * List panels.
 *
 * Example HTML:
 *
 * <div class="multi-edit">
 *     <select>
 *         <option selected="selected">With selected...</option>
 *         <option>Change author</option>
 *         <option>Duplicate</option>
 *         <option>Delete</option>
 *     </select>
 *     <div class="multi-option multi-step">
 *         <select name="order">
 *             <option value="1">1</option>
 *             <option value="2">1</option>
 *             <option value="3" selected="selected">5</option>
 *         </select>
 *     </div>
 *     <input type="submit" value="Go">
 * </div>
 */

.multi-option.multi-step {
    display: inline-block;
    margin-left: 0.30769230769231em; // 4px / 13px
}

/**
 * Ensure links display as inline blocks (prevents linebreak problems).
 *
 * Example HTML:
 *
 * <a class="txp-option-link">Edit</a>
 */

.txp-option-link {
    display: inline-block;
    white-space: nowrap;
}

/**
 * When text sections are linked with anchors, make sure there is ample padding
 * above so they don't become obscured by sticky `header` area.
 *
 * Appears on:
 *
 * Plugin help pages, miscellaneous text pages.
 *
 * Example HTML:
 *
 * <section class="text-section" id="help-section02">
 */

.text-section {
    margin-top: 3em;
    padding-top: 3em;
    border-top: 2px solid $color-border;
}

@include dark-mode {
    .text-section {
        border-top-color: $dark-color-border;
    }
}

/**
 * System permissions 'keep out' messages.
 */

.restricted-area {
    font-size: 2rem; // 26px / 13px
    text-align: center;
}

/**
 * Visually secondary text.
 */

.secondary-text {
    opacity: 0.66;
}

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

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

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

/**
 * List navigators on list panels.
 *
 * Anchor elements kept to one line to prevent space between buttons.
 *
 * Example HTML:
 *
 * <div class="txp-layout-cell-row txp-navigation" id="image_navigation">
 *     <p class="nav-tertiary pageby">
 *         <a class="navlink-active">15</a><a class="navlink">25</a><a class="navlink">50</a>
 *     </p>
 *     <nav class="prev-next">
 *         <span class="disabled"><span class="ui-icon ui-icon-arrowthick-1-w">Previous</span></span>
 *         <form>
 *             <label>Page</label>
 *             <input class="current-page">
 *             of <span class="total-pages">2</span>
 *         </form>
 *         <a><span class="ui-icon ui-icon-arrowthick-1-e">Next</span></a>
 *     </nav>
 * </div>
 */

.pageby {
    margin: 1em 0;
}

.prev-next {
    margin: 1em 0;

    form {
        display: inline-block;
    }
}

/**
 * Swap margin positions and arrow icons in RTL languages.
 */

[dir="rtl"] .prev-next {
    .ui-icon-arrowthick-1-w {
        transform: rotate(180deg);
    }

    .ui-icon-arrowthick-1-e {
        transform: rotate(180deg);
    }
}


/* Panes
   ========================================================================== */

/**
 * Styling of edit panels.
 *
 * 1. Maximum width of edit panels.
 * 2. Remove margin above `h2` within panels.
 */

.txp-edit {
    position: relative;
    max-width: ($text-column - 2em);
    margin: 0 auto 1em;
    padding: 1em 1em 1px;
    clear: both;
    /* 1 */
    background: $color-background-box;

    h2 {
        /* 2 */
        margin-top: 0;
    }
}

@include dark-mode {
    .txp-edit {
        border: 1px solid $dark-color-border-extra-light;
        background: $dark-color-background;
    }
}

/**
 * Styling of edit panel cancel/submit button combinations.
 */

.txp-edit-actions {
    text-align: right;

    > * {
        margin: 0 0 0 1em;
    }
}

.txp-edit .txp-edit-actions {
    margin: 1em -1em;
    padding: 1em 1em 0;
    border-top: 2px solid $color-background;
}

@include dark-mode {
    .txp-edit .txp-edit-actions {
        border-top-color: $dark-color-background-box;
    }
}

/**
 * Swap alignment and margin positions in RTL languages.
 */

[dir="rtl"] .txp-edit-actions {
    text-align: left;

    > * {
        margin: 0 1em 0 0;
    }
}


/* Form fields.
   ========================================================================== */

/**
 * Form field containers.
 *
 * Textpattern form fields can have optional inline help texts applied to them.
 *
 * Example HTML:
 *
 * <div class="txp-form-field">
 *     <div class="txp-form-field-label">
 *         <label> <a class="pophelp"><span class="ui-icon ui-icon-help">Help</span></a></label>
 *     </div>
 *     <div class="txp-form-field-value">
 *         <input>
 *     </div>
 * </div>
 *
 * <div class="txp-form-field">
 *     <div class="txp-form-field-label">
 *         <label> <a class="pophelp"><span class="ui-icon ui-icon-help">Help</span></a></label>
 *     </div>
 *     <div class="txp-form-field-instructions">
 *         <p>(Optional) intructions on how to fill out this form field.</p>
 *     </div>
 *     <div class="txp-form-field-value">
 *         <input>
 *     </div>
 * </div>
 */

.txp-form-field {
    margin: 1em 0;
    vertical-align: top;

    .txp-edit &,
    .txp-tabs-vertical-group & {
        flex-flow: row wrap;
    }
}

/**
 * Label/value form field pairings.
 *
 * Note: this is always collapsed to a one-column format on mobile layout.
 *
 * Example HTML:
 *
 * <div class="txp-form-field">
 *     <div class="txp-form-field-label">
 *         <label>Label <a class="pophelp"><span class="ui-icon ui-icon-help">Help</span></a></label>
 *     </div>
 *     <div class="txp-form-field-value">
 *         <input type="text" size="32">
 *     </div>
 * </div>
 */

.txp-form-field-label,
.txp-form-field-value {
    max-width: 30em; // 390px / 13px
}

/**
 * Allow a 'shim' to move non-regular form fields 50% across panels.
 */

.txp-form-field-shim {
    margin-left: 50%;
}

[dir="rtl"] {
    .txp-form-field-shim {
        margin-right: 50%;
        margin-left: 0;
    }
}

/**
 * Inline form field pairings on edit panels, preferences group panels and
 * setup panels.
 *
 * Example HTML:
 *
 * <form class="txp-edit">
 *     <div class="txp-form-field">
 *         <div class="txp-form-field-label"></div>
 *         <div class="txp-form-field-value"></div>
 *     </div>
 * </form>
 */

.txp-edit,
.txp-tabs-vertical-group,
.setup:not(.welcome) {
    .txp-form-field:not(.txp-form-field-textarea) {
        display: flex;
        align-items: baseline;
    }

    .txp-form-field-label,
    .txp-form-field-value {
        flex: 1 1 0%;
        min-height: 2.307692307692308em; // 30px / 13px
    }
}

/**
 * Don't inline or constrain form fields for textareas.
 *
 * Example HTML:
 *
 * <div class="txp-form-field txp-form-field-textarea">
 *     <div class="txp-form-field-label">
 *         <label>Label <a class="pophelp"><span class="ui-icon ui-icon-help">Help</span></a></label>
 *     </div>
 *     <div class="txp-form-field-value">
 *         <textarea></textarea>
 *     </div>
 * </div>
 */

.txp-form-field-textarea {
    .txp-form-field-label,
    .txp-form-field-value {
        flex: none;
        max-width: inherit;
        min-height: inherit;
    }
}

/**
 * Don't constrain form fields when in 3 column layout spans.
 */

.txp-layout-4col-3span {
    .txp-form-field-label,
    .txp-form-field-value {
        max-width: inherit;
    }
}

/**
 * Form field inline help texts.
 *
 * 1. Limit maximum width of instructions, for legibility.
 *
 * Example HTML:
 *
 * <div class="txp-form-field>
 *     <div class="txp-form-field-label"></div>
 *     <div class="txp-form-field-instructions">
 *         <p>(Optional) intructions on how to fill out this form field.</p>
 *     </div>
 *     <div class="txp-form-field-value"></div>
 * </div>
 */

.txp-form-field-instructions {
    /* 1 */
    max-width: 56em; // 616px / 11px

    .txp-edit &,
    .txp-tabs-vertical-group & {
        flex: 0 0 100%;
        order: 3;
        max-width: 100%;
    }
}

/**
 * Options for specific textareas.
 */

.txp-textarea-options {
    position: relative;
    z-index: 2;
    margin: 0 1px;
    float: right;
}

.txp-textarea-preview {
    margin: 0 0 0 1em;
}

/**
 * Swap alignment of textarea options in RTL languages.
 */

[dir="rtl"] {
    .txp-textarea-options {
        float: left;
    }

    .txp-textarea-preview {
        margin: 0 1em 0 0;
    }
}

/**
 * Constrain the width of vertical tab column 2 groups.
 */

.txp-tabs-vertical-group {
    max-width: $text-column;
}

/**
 * Ensure dialog box vertical footprint doesn't spill out of screen area.
 */

.ui-dialog.txp-dialog-container,
.ui-dialog.txp-preview-container {
    flex-direction: column;
    align-items: stretch;
    margin: auto;
}

/**
 * Override position for the tag builder dialog.
 */

.txp-tagbuilder-container {
    position: absolute !important;
}

/**
 * Save export checkbox region on certain presentation panels.
 */

.txp-save-export {
    display: block;
    margin: 1em 0;
}