/* ==========================================================================
   Additional layout for devices < 768px
   ========================================================================== */


@media (max-width: $break-large) {

    /**
     * Adjust right/left padding of body.
     */

    body {
        padding: 4em 3em 0; // 52px + 39px
    }

    .setup,
    .login {
        padding: 1em 3em 0; // 13px + 39px
    }

    /**
     * Grid column cell changes at 1st breakpoint downwards.
     *
     * Cells for 4 column layout become 2 column layout.
     * Cells for 4 column span variations become 1 column layout.
     */

    .txp-layout-4col {
        grid-column: span 6;
        width: 50%; // Flexbox fallback.
    }

    .txp-layout-4col-alt,
    .txp-layout-4col-2span,
    .txp-layout-4col-3span {
        grid-column: span 12;
        width: 100%; // Flexbox fallback.
    }

    // Override Flexbox fallback for browsers with CSS Grid support.
    @supports (display: grid) {
        .txp-layout-4col,
        .txp-layout-4col-alt,
        .txp-layout-4col-2span,
        .txp-layout-4col-3span {
            width: auto;
        }
    }

    /**
     * Adjust right/left padding of header area.
     */

    .txp-header {
        padding: 0 3em; // 39px
    }

    /**
     * Smaller version of Textpattern logo.
     */

    .txp-header h1 {
        width: 1.75em; // 28px / 16px

        a {
            width: 1.75em; // 28px / 16px
        }
    }

    /**
     * 'View site' link.
     *
     * Example HTML:
     *
     * <p class="txp-view-site">
     *     <a>
     *         <span class="txp-view-site-name">My site</span>
     *     </a>
     * </p>
     */

    .txp-view-site {
        margin: 0.0625em 0.375em 0; // 1px / 16px + 6px / 16px;
        padding: 0;
        overflow: inherit;
        font-size: 16px;

        a {
            @include hide-text;

            display: block;
            width: 2em;
            height: 2em;
            background: url("../img/sprite.svg") no-repeat -8em 0;
            background-size: 13em 2em; // 208px / 16px + 32px / 16px
        }
    }

    /**
     * Search widget at top of lists.
     */

    .txp-search,
    [dir="rtl"] .txp-search {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-top: 0;
        float: none;
    }

    /**
     * Reposition search clearer.
     */

    .txp-search-clear {
        flex: 1 0 auto;
        width: 100%;
        margin: 0 0 0.5em;
        text-align: left;

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

    /**
     * Reset Form panel 'name' and 'type' fields to blocks.
     */

    #page-form .name,
    #page-form .type {
        display: block;
        margin: 1em 0;
    }

    #page-form .txp-actions a {
        margin-top: 0.5em;
    }

    /**
     * Unsticky save button region.
     */

    .txp-save-zone {
        position: inherit;
        margin: 0;
        padding: 0;
        border: 0;

        @if $flat-theme < 1 {
            box-shadow: none;
        }

        .txp-actions {
            margin-bottom: 1em;
        }
    }

    /**
     * Restrict width of multiselect to avoid layout breakage.
     */

    select[size],
    select[multiple] {
        max-width: 22em; // 286px / 13px

        option {
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}



/* ==========================================================================
   Additional layout for devices < 547px
   ========================================================================== */


@media (max-width: $break-small) {

    /**
     * Prevent zoom upon form element focus.
     */

    html {
        font-size: 16px;
    }

    /**
     * Adjust right/left padding of body.
     */

    body {
        padding: 4em 1em 0; // 64px + 16px
    }

    .setup,
    .login {
        padding: 1em 1em 0; // 16px
    }

    /**
     * Adjust right/left padding of header area.
     */

    .txp-header {
        height: 2.625em; // 42px / 16px
        padding: 0 1em; // 16px
    }

    /**
     * Grid column cell changes at 2nd breakpoint downwards.
     *
     * Cells for 2 column layout become 1 column layout.
     * Cells for 3 column layout become 1 column layout.
     * Cells for 4 column layout become 1 column layout.
     */

    .txp-layout {
        gap: 0; // Prevent content overflow.
    }

    .txp-layout-2col,
    .txp-layout-3col,
    .txp-layout-3col-2span,
    .txp-layout-4col {
        grid-column: span 12;
        width: 100%; // Flexbox fallback.
    }

    // Override Flexbox fallback for browsers with CSS Grid support.
    @supports (display: grid) {
        .txp-layout-2col,
        .txp-layout-3col,
        .txp-layout-3col-2span,
        .txp-layout-4col {
            width: auto;
        }
    }

    .txp-layout-cell-row {
        display: block;
    }

    /**
     * Non-fixed header on mobile layout (because mobile nav menu couldn't scroll otherwise).
     */

    .txp-header {
        position: absolute;
    }

    .txp-header h1,
    .txp-view-site {
        margin-top: 0.25em;
    }

    /**
     * Show the navigation menu toggle button on mobile layout.
     *
     * Example HTML:
     *
     * <button class="txp-nav-toggle">
     */

    button.txp-nav-toggle {
        @include hide-text;

        display: block;
        width: 2em;
        height: 2em;
        margin: 0.25em 0.5em 0;
        padding: 0;
        float: left;
        border: 0;

        @if $border-radius > 0 {
            border-radius: 0;
        }

        background: transparent url("../img/sprite.svg") -10em 0;
        background-size: 13em 2em; // 208px / 16px + 32px / 16px

        &:focus {
            outline: thin solid $color-link-focus;
        }

        &:not(.collapsed) {
            background-color: rgba(255, 255, 255, 0.33);
        }
    }

    /**
     * Hide the navigation menu by default on mobile layout.
     */

    .txp-nav .data-dropdown {
        display: none;
    }

    /**
     * Show the navigation menu when toggled on mobile layout.
     */

    .txp-nav.in .data-dropdown {
        display: block;
        position: absolute;
        top: 2.75em;
        right: 0;
        left: 0;
        background: $color-highlight-box;

        @if $flat-theme < 1 {
            box-shadow: $standard-shadow;
        }

        // Indicator pointer.

        &::before {
            content: "";
            position: absolute;
            z-index: 2;
            top: -0.5em; // 8px / 16px
            left: 4.375em; // 62px / 16px;
            width: 1em;
            height: 0.5em;
            background: url("../img/sprite.svg") no-repeat -12em 0;
            background-size: 13em 2em; // 208px / 16px + 32px / 16px

            [dir="rtl"] & {
                right: 4.375em; // 62px / 16px;
                left: auto;
            }
        }
    }

    .txp-nav > ul > li {
        float: none;
        border: 0;
        border-bottom: 1px solid $color-border-light;

        &:first-child {
            border-left: 0;
        }

        > a,
        > a.dropdown-toggle {
            padding: 0 1em;

            [dir="rtl"] & {
                padding: 0 1em;
            }
        }

        a.dropdown-toggle::after {
            top: 1.25em;
            right: 1em;

            [dir="rtl"] & {
                right: auto;
                left: 1em;
            }
        }
    }

    /**
     * Secondary-level navigation menu items (submenus).
     */

    .dropdown-menu {
        position: static;
        min-width: 0;
        border: 0;

        @if $border-radius > 0 {
            border-radius: 0;
        }

        @if $flat-theme < 1 {
            box-shadow: none;
        }

        a {
            padding: 0.5em 1em 0.5em 2em;
            white-space: normal;

            [dir="rtl"] & {
                padding: 0.5em 2em 0.5em 1em;
            }
        }

        // Remove indicator pointer.

        &::before {
            display: none;
        }
    }

    @if $flat-theme < 1 {
        @include dark-mode {
            .dropdown-menu {
                box-shadow: none;
            }
        }
    }

    /**
     * Collapse 2 column form fields to 1 column (remove flexbox).
     */

    .txp-edit,
    .txp-tabs-vertical-group {
        .txp-form-field:not(.txp-form-field-textarea) {
            display: block;
        }
    }

    /**
     * Remove forced 'shim' alignments.
     */

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

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

    /**
     * Label/value one-column layouts within panes.
     *
     * Collapsed from two-column format on desktop layout (remove flexbox).
     */

    .txp-edit,
    .txp-tabs-vertical-group {
        .txp-form-field-label,
        .txp-form-field-value {
            flex: none;
            min-height: inherit;
        }
    }

    /**
     * Remove inline alignment margin values when collapsed.
     */

    .txp-form-field-value {
        input,
        select,
        // This is an optional jQuery UI widget (not used in core layouts).
        .jquery-ui-controlgroup {
            margin: 0;
        }
    }

    /**
     * Prevent over-expansion of contents.
     */

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

    [type="file"] {
        width: 100%;
    }

    /**
     * Collapse progress meters responsively.
     */

    .progress-meter {
        ol {
            display: block;
            margin-bottom: 1em;
            text-align: left;
        }

        li {
            display: block;
            margin: 0;
            float: none;

            &::after {
                display: none;
            }
        }
    }

    /**
     * Override specifity on collapsed progress meters in RTL languages.
     */

    [dir="rtl"] .progress-meter {
        ol {
            text-align: right;
        }

        li {
            margin: 0;

            &::after {
                display: none;
            }
        }
    }

    /**
     * Collapse jQuery UI tabs responsively.
     */

    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-nav {
        height: auto;
        border-bottom: 1px solid $color-border-light;

        li {
            display: block;
            height: auto;
            border: 1px solid $color-border-light;
            border-bottom: 1px solid transparent;

            @if $flat-theme < 1 {
                box-shadow: none;
            }

            &.ui-tabs-active {
                margin-bottom: 0;
                padding-bottom: 0;
            }
        }
    }

    /**
     * Remove top border from jQuery UI tabs panel.
     */

    .ui-tabs:not(.ui-tabs-vertical) .ui-tabs-panel {
        border-top-width: 0;
    }

    /**
     * Remove float from inline the action links.
     */

    .txp-actions-inline,
    .txp-edit .txp-actions-inline,
    [dir="rtl"] .txp-actions-inline,
    [dir="rtl"] .txp-edit .txp-actions-inline {
        position: static;
        margin-top: 0;
        float: none;
    }

    /**
     * Reset font size/weight/colour for elements in write -> main content area.
     */

    #main_content .text {
        input,
        textarea,
        .title input {
            font-size: 1rem;
        }
    }
}