@each $font-name, $font-config in $o-theme-font-configs {
    $url: map-get($font-config, 'url');
    @if $url {
        @import url("https://fonts.googleapis.com/css?family=#{unquote($url)}&display=swap");
    }
}

:root {
    // Override css variables to influence the default style of the editor
    // without duplicating the css.
    @include print-variable('o-we-toolbar-height', $o-navbar-height);

    // Need info about the color of each color palette
    @for $index from 1 through length($o-color-palettes) - 1 { // Not the user one
        @each $name, $color in nth($o-color-palettes, $index) {
            @include print-variable('o-palette-#{$index}-#{$name}', $color);
        }
    }
}

// EDITOR TOP BAR AND POPOVER
.o_we_website_top_actions {
    @include o-position-absolute($top: 0, $right: 0);
    z-index: ($zindex-fixed + $zindex-modal-backdrop) / 2 + 2; // $o-we-zindex
    display: flex;
    justify-content: flex-end;
    width: $o-we-sidebar-width;
    height: $o-we-sidebar-top-height;
    background-color: $o-we-sidebar-tabs-bg;

    .btn-group, .btn {
        height: 100%;
    }

    .btn {
        border: none;
        border-radius: 0;
        padding: 0.375rem 0.75rem;
        font-size: $o-we-font-size;
        font-family: $o-we-font-family;
        font-weight: 400;
        line-height: 1;

        &.btn-primary {
            @include button-variant($o-brand-primary, $o-brand-primary);
        }
        &.btn-secondary {
            @include button-variant($o-we-sidebar-tabs-bg, $o-we-sidebar-tabs-bg);
        }
        &:focus, &:active, &:focus:active {
            outline: none;
            box-shadow: none;
        }
    }

    .dropdown-menu {
        left: auto;
        right: 0;
    }
}

#oe_snippets {
    top: $o-we-sidebar-top-height;
}

.note-statusbar {
    display: none;
}

// TRANSLATIONS
.oe_translate_examples li {
    margin: 10px;
    padding: 4px;
}

html[lang] > body.editor_enable [data-oe-translation-state] {
    background: rgba($o-we-content-to-translate-color, 0.5) !important;

    &[data-oe-translation-state="translated"] {
        background: rgba($o-we-translated-content-color, 0.5) !important;
    }

    &.o_dirty {
        background: rgba($o-we-translated-content-color, 0.25) !important;
    }
}

// SNIPPET PANEL
$i: 1;
@each $font-name, $font-config in $o-theme-font-configs {
    we-toggler.o_we_option_font_#{$i}, we-button.o_we_option_font_#{$i} > div {
        font-family: o-safe-get($font-config, 'family', $font-family-base);

        &::before {
            content: $font-name;
        }
    }
    $i: $i + 1;
}
.o_we_add_google_font_btn {
    border-top: 1px solid currentColor !important;
}

#oe_snippets > .o_we_customize_panel {
    .o_we_user_value_widget.o_palette_color_preview_button {
        > div {
            display: flex;
            flex: 1 1 auto;
            align-items: stretch;
        }
        .o_palette_color_preview {
            flex: 1 0 0;
            margin: 1px 0;
            transition: flex 150ms ease 0s;
        }
        &:not(:hover) .o_palette_color_preview {
            &:nth-child(4), &:nth-child(5) {
                flex: 0 0 0;
            }
        }
    }

    we-select.o_scroll_effects_selector we-button {
        padding-top: $o-we-item-spacing;
        padding-bottom: $o-we-item-spacing;

        img {
            max-height: 80px;
            width: auto;
            margin-right: $o-we-item-spacing;
            margin-left: $o-we-item-spacing * .5;
        }
    }

    //----------------------------------------------------------------------
    // 'Options' Tab Specific Components
    //----------------------------------------------------------------------

    // Theme Colors Editor
    .o_we_theme_colors_selector {

        > we-title {
            display: none
        }
        .o_we_so_color_palette.o_we_user_value_widget {

            + .o_we_so_color_palette {
                margin-left: 10px;
            }
            .o_we_color_preview {
                width: $o-we-sidebar-content-field-colorpicker-size-large;
                height: $o-we-sidebar-content-field-colorpicker-size-large;
            }
        }
        > div, we-select.o_we_theme_colors_select, we-toggler {
            display: flex;
        }
        > div {
            align-items: stretch;
            width: 100%;
        }
        we-select.o_we_theme_colors_select {
            justify-content: flex-end;
            margin-left: auto;

            > div, we-toggler {
                height: 100%;
            }
        }
        we-toggler {
            align-items: center;
            padding: 0 0.4rem;
            font-size: 1.5em;

            &:after {
                content: none;
            }
        }
    }

    // Palettes Dropdown
    .o_palette_color_preview_button > div {
        min-height: 24px;
    }

    // CC Edition
    .o_we_cc_preview_wrapper {
        // Use box-shadow rather than border-bottom in order to
        // avoid misalignments in the 'Options' tab.
        border: 1px solid;
        border-color: rgba($o-we-item-standup-color-light, .2) $o-we-sidebar-content-field-dropdown-border-color transparent;
        box-shadow: 0 1px 0 $o-we-item-standup-color-dark;

        + .o_we_collapse_toggler {
            height: 35px; // FIXME hardcoded...
        }
    }
}

// SNIPPET OPTIONS
.o_we_border_preview {
    display: inline-block;
    width: 999px;
    max-width: 100%;
    margin-bottom: 2px;
    border-width: 4px;
    border-bottom: none !important;
}

.pac-container { // google map autosuggestion
    z-index: $zindex-modal-backdrop; // > $o-we-zindex
    width: $o-we-sidebar-width !important;
    font-size: $o-we-sidebar-font-size;
    margin-left: -$o-we-sidebar-width/2;
    border-top: none;
    background-color: $o-we-sidebar-content-field-dropdown-bg;
    box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
    &:after {
        display: none;
    }
    .pac-item {
        border-top: $o-we-sidebar-content-field-border-width solid lighten($o-we-sidebar-content-field-dropdown-border-color, 15%);
        border-radius: $o-we-sidebar-content-field-border-radius;
        background-color: $o-we-sidebar-content-field-clickable-bg;
        color: $o-we-sidebar-content-field-clickable-color;
        &:hover {
            background-color: $o-we-sidebar-content-field-dropdown-item-bg-hover;
            cursor: pointer;
        }
    }
    .pac-item-query {
        color: $o-we-sidebar-content-field-clickable-color;
    }
}