/* Sidebar */

#search {
    form {
        @include icon(false, solid);
        position: relative;
        margin-left: 4em;

        input[type="text"] {
            padding-right: _size(element-height);
        }
    }
}

#sidebar {
    $pad: 1.5em / 0.9;

    @include vendor('flex-grow', '0');
    @include vendor('flex-shrink', '0');
    @include vendor('transition', (
        'margin-left 0.5s ease',
        'box-shadow 0.5s ease'
    ));

    z-index: _misc(z-index-base);
    position: fixed;
    left: 0;
    top: 0;
    width: _size(sidebar-width-alt);
    height: 100%;
    box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
    background-color: _palette(bg-alt);
    font-size: 0.9em;

    h2 {
        font-size: (1.25em / 0.9);
    }

    > .inner {
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        overflow-y: auto;
        position: absolute;
        left: 0;
        top: 0;
        padding: $pad 0 $pad 0;
        width: _size(sidebar-width-alt);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        > * {
            flex: 0;
            border-bottom: 0;
            margin: 0;
            padding: 0 $pad 0 $pad;

            > :last-child {
                margin-bottom: 0;
            }

            &:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
            }
        }

        > #menu {
            flex: 1;
        }

        > #results {
            top: 0;
            flex: 1;
            overflow-y: auto;
            padding-left: 4em;
        }

        > .alt {
            background-color: darken(_palette(bg-alt), 2);
            border-bottom: solid 2px _palette(border);
            margin: ($pad * -1) 0 0 ($pad * -1);
            padding: $pad;
        }
    }

    .toggle {
        @include icon(false, solid);
        @include vendor('transition', 'left 0.5s ease');
        -webkit-tap-highlight-color: rgba(255,255,255,0);
        position: fixed;
        left: 0;
        border: 0;
        display: block;
        width: 6em;
        height: 6.25em;
        outline: 0;
        overflow: hidden;
        line-height: 6.25em;
        text-align: center;
        text-indent: 6em;
        z-index: _misc(z-index-base);

        &#sidebar-toggle-button {
            top:0;
        }

        &#sidebar-search-button {
            top:6.25em;
        }

        &#sidebar-logo-button {
            top:12.5em;
        }

        &:before {
            position: absolute;
            left: 0;
            top: 0;
            width: inherit;
            height: inherit;
            margin-left: (-0.875em / 2);
            font-size: 1.5rem;
            line-height: inherit;
            text-indent: 0;
        }

        &#sidebar-toggle-button:before {
            content: '\f0c9';
        }

        &#sidebar-search-button:before {
            content: '\f002';
        }

        &#sidebar-logo-button:before {
            display: none;
            content: '';
        }

        &#sidebar-logo-button svg {
            position: absolute;
            top: 20%;
            left: 16%;
            width: 40%;
            height: 40%;
            font-size: 1.5rem;
            line-height: inherit;
            text-indent: 0;
            fill: _palette(accent);
        }
    }

    &.inactive {
        margin-left: (_size(sidebar-width-alt) * -1);
        box-shadow: none;
    }

    body.is-preload & {
        display: none;
    }
}

/* Inverted */

.inverted #search {
    form {
        &:before {
            color: _palette(fg);
        }

        input[type="text"] {
            color: _palette(fg);
        }
    }
}

#sidebar.inverted {
    background-color: _palette(bg-inverted);

    header.major > :last-child {
        border-bottom: solid 3px _palette(fg-inverted);
    }

    a.toggle {
        color: _palette(accent-inverted);

        &:hover {
            color: _palette(accent-cp);
        }

        &#sidebar-logo-button svg {
            fill: _palette(accent-inverted);
            stroke: _palette(accent-inverted);
        }

        &#sidebar-logo-button:hover svg {
            fill: _palette(accent-cp);
            stroke: _palette(accent-cp);
        }
    }

    > .inner {

        > * {
            border-bottom: 0;
        }

        > .alt {
            background-color: darken(_palette(bg-inverted), 2);
            border-bottom: solid 2px _palette(border-inverted);
        }
    }
}

#sidebar.inverted.inactive {
    a.toggle {
        color: _palette(accent);

        &:hover {
            color: _palette(accent-cp);

            &#sidebar-logo-button svg {
                fill: _palette(accent-cp);
                stroke: _palette(accent-cp);
            }
        }

        &#sidebar-logo-button svg {
            fill: _palette(accent);
            stroke: _palette(accent);
        }
    }
}