@import "utils/Themes"

@font-face {
    font-family: 'OpenSans';
    src:url('../../../lib/opensans/fonts/OpenSans-Light.woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src:url('../../../lib/opensans/fonts/OpenSans-Regular.woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSans';
    src:url('../../../lib/opensans/fonts/OpenSans-SemiBold.woff');
    font-weight: 600;
    font-style: normal;
}

// Top bar and show/hide button
.fl-prefsEditor-separatedPanel {
    display: flex;
    flex-direction: column;

    .fl-panelBar {
        width: 100%;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        box-shadow: 0px 2px 3px 0 #6f6f6f;
        font-size: 1.6rem;

        // panelBar for desktop view
        &.fl-panelBar-wideScreen {
            display: none;
        }

        .fl-prefsEditor-buttons {
            width: 100%;
            height: 66px; // fixed height so the buttons won't push down the sliding panel as the text size is changed
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            line-height: 1; // fixed line height so it doesn't scale with the Preferences Editor line space scaling.
        }
    }

    .fl-prefsEditor-showHide, .fl-prefsEditor-reset {
        text-align: center;
        text-transform: lowercase;
        background-color: #ffffff;
        border: none;
        color: #2f2b2a;
        font-family: 'OpenSans',"Myriad Pro", Helvetica, Arial, sans-serif;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0;
    }

    .fl-prefsEditor-showHide {
        flex-grow: 1;
        flex-shrink: 2;
        text-align: left;
        padding-left: 16px; // fixed padding to save space on mobile when text size adjustments are applied
    }

    .fl-prefsEditor-reset {
        flex-shrink: 1;
        border-left: 2px solid #ccc;
        padding-right: 16px; // fixed padding to save space on mobile when text size adjustments are applied
    }

    // Font icon for reset tab
    .fl-icon-undo {
        font-family: 'PrefsFramework-Icons';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        -webkit-font-smoothing: antialiased;
        font-size: 1.2rem;
    }

    .fl-icon-undo:before {
        content: "\e008";
    }

    // large screen / desktop view
    @media screen and (min-width: 40em) {
        display: block;

        .fl-panelBar {
            box-shadow: none;
            font-size: 1rem;

            // panelBar for mobile view
            &.fl-panelBar-smallScreen {
                display: none;
            }

            // panelBar for desktop view
            &.fl-panelBar-wideScreen {
                display: block;
            }

            .fl-prefsEditor-buttons {
                width: auto;
                height: auto;

                box-shadow: 2px 2px 3px 0 #6f6f6f;
                border-bottom: 1px solid #ccc;
                border-left: 1px solid #ccc;
                border-right: 1px solid #ccc; //FLUID-4991: The shadow effect around the hide/show preferences bug fix. (Border right added)
                border-bottom-left-radius:8px;
                border-bottom-right-radius:8px;
                background-color: white;
                min-height: 2rem;
                margin-right: 5%;
                display: block;
                float: right;
            }
        }

        .fl-prefsEditor-showHide, .fl-prefsEditor-reset {
            font-weight: bold;
            border: none;
            min-height: 1.8rem;
            font-size: 1.1rem;
            padding: 0;
        }

        .fl-prefsEditor-showHide {
            margin: 0 0.5rem;
        }

        .fl-prefsEditor-reset {
            padding-left: 0.8rem;
            margin-right: 0.5rem;
        }
    }
}

// IFrame
.fl-prefsEditor-separatedPanel-iframe {
    border: 0;
    background-color: #fff;
    height: 0;
    width: 100%;
}

// Theming
build-themes-separatedPanelPrefsEditor(themes);