///
/// This files regroups the variables and mixins which are specific to the builder.
///

//------------------------------------------------------------------------------
// HTML Builder Variables
//------------------------------------------------------------------------------

$o-we-colors: (
    "primary": $o-we-color-primary,
    "global": $o-we-color-global,
    "accent": $o-we-color-accent,

    "info": $o-we-color-info,
    "success": $o-we-color-success,
    "danger": $o-we-color-danger,
    "warning": $o-we-color-warning,
) !default;

// Needed to be changed to be high enough to not overflow when a user
// has a page with a lot of content (10000px was proven to be too small)
$o-we-handles-offset-to-hide: 100000px !default;
$o-we-handles-btn-size: 14px !default;
$o-we-handles-accent-color: $o-we-color-accent !default;
$o-we-handles-accent-color-preview: $o-enterprise-color !default;
$o-we-handle-edge-size: $o-we-handles-btn-size !default;
$o-we-handle-border-width: 2px !default;
$o-we-handle-inside-line-width: 3px !default;

$o-we-dropzone-size: 30px !default; // $grid-gutter-width (todo: allow to use the variable)
$o-we-dropzone-border-width: 2px !default;
$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default;
$o-we-dropzone-accent-color: $o-we-color-accent !default;
$o-we-dropzone-bg-color: rgba($o-we-dropzone-accent-color, .5) !default;

$o-we-toolbar-height: 40px !default;
$o-we-toolbar-color-accent: #018597 !default;

$o-we-item-standup-color-light: $o-we-fg-lighter;
$o-we-item-standup-color-dark: $o-we-bg-darkest;
$o-we-item-standup-top: inset 0 1px 0;
$o-we-item-standup-bottom: inset 0 -1px 0;

$o-we-dropdown-spacing: $o-we-item-spacing !default;
$o-we-dropdown-bg: $o-we-bg-darker !default;
$o-we-dropdown-border-width: 1px !default;
$o-we-dropdown-border-color: $o-we-bg-darkest !default;
$o-we-dropdown-shadow: 0 2px 8px 0 rgba(black, 0.5) !default;
$o-we-dropdown-item-height: 34px !default;
$o-we-dropdown-item-spacing: 1px !default;
$o-we-dropdown-item-bg: $o-we-bg-lightest !default;
$o-we-dropdown-item-bg-hover: $o-we-bg-light !default;
$o-we-dropdown-item-color: $o-we-fg-dark !default;
$o-we-dropdown-item-hover-color: $o-we-fg-light !default;
$o-we-dropdown-item-active-bg: mix($o-we-dropdown-item-bg, $o-we-dropdown-item-bg-hover) !default;
$o-we-dropdown-item-active-color: $o-we-fg-lighter !default;
$o-we-dropdown-caret-spacing: 2px !default;

$o-we-sidebar-bg: $o-we-bg !default;
$o-we-sidebar-color: $o-we-color !default;
$o-we-sidebar-font-size: 12px !default;
$o-we-sidebar-border-width: $o-we-border-width !default;
$o-we-sidebar-border-color: $o-we-border-color !default;

// This sidebar width cannot be increased at the moment, it is at the maximum
// value it can have, given our current specs, which is 1920px / 150% - 992px.
// - 1920px: the usual size of user screens, supposedly the browser one if the
//       OS task bar is not anchored to the right/left.
// - 150%: this is actually the recommended Windows zoom (virtually decreasing
//       the amount of available pixels to fit our UI).
// - 992px: the current minimum width the screen must have for our websites to
//       be in "desktop" mode (below, columns break over multiple lines).
//
// If the sidebar is 1px larger, entering edit mode on such Full HD + 150% zoom
// will display the website in "mobile" mode (note it is the same with browser
// zoom or OS zoom).
//
// Notice that 1920px / 150% = 1280px which gives the minimum size of the screen
// that will display the website in "desktop" mode in the editor if no zoom is
// used, which seems like an acceptable value.
//
// Note: reducing the sidebar width even further to support more devices or
// more zoom / OS task bar configuration would be problematic as the sidebar
// would become too small. It is currently kinda at both its maximum and minimum
// authorized value.
//
// We tried solutions to virtually "de-zoom" the website iframe to display the
// website in "desktop" mode no matter what but this did not give great results.
// On problematic devices, the user still has the possibility to de-zoom its
// browser by himself.
$o-we-sidebar-width: 288px !default; // This includes $o-we-sidebar-border-width

$o-we-sidebar-top-height: 46px !default;

$o-we-sidebar-tabs-size-ratio: 1 !default;
$o-we-sidebar-tabs-height: 3rem;
$o-we-sidebar-tabs-bg: $o-we-bg-darker !default;
$o-we-sidebar-tabs-color: $o-we-sidebar-color !default;
$o-we-sidebar-tabs-disabled-color: $o-we-fg-darker !default;
$o-we-sidebar-tabs-active-border-width: 2px !default;
$o-we-sidebar-tabs-active-border-color: $o-we-color-accent !default;
$o-we-sidebar-tabs-active-background-color: rgba($o-we-color-accent, .15) !default;
$o-we-sidebar-tabs-active-color: $o-we-fg-lighter !default;

$o-we-sidebar-blocks-content-bg: $o-we-bg-dark !default;
$o-we-sidebar-blocks-content-spacing: 10px !default;
$o-we-sidebar-blocks-content-snippet-spacing: 2px !default;
$o-we-sidebar-blocks-content-snippet-bg: $o-we-bg-lighter !default;

$o-we-sidebar-content-highlight-bar-width: 2px !default;
$o-we-sidebar-content-highlight-bar-color: $o-we-color-accent !default;

$o-we-sidebar-content-gutter-item-indent: 5px !default;
$o-we-sidebar-content-padding-base: 10px !default;
$o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default;
$o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default;
$o-we-sidebar-content-available-room: $o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent !default;

$o-we-sidebar-content-main-title-height: 32px !default;
$o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default;
$o-we-sidebar-content-main-title-font-size: 13px !default;

$o-we-sidebar-content-block-spacing: 10px !default;

$o-we-sidebar-content-fold-block-bg: $o-we-bg-lighter !default;

$o-we-sidebar-content-field-spacing: $o-we-item-spacing !default;
$o-we-sidebar-content-field-color: $o-we-fg-darker !default;
$o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default;
$o-we-sidebar-content-field-control-item-size: 1em !default;
$o-we-sidebar-content-field-control-item-spacing: 0.5em !default;
$o-we-sidebar-content-field-label-spacing: 6px !default;

$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-available-room * .4 !default;
$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing * .5 !default;
$o-we-sidebar-content-field-height: 22px !default;

$o-we-sidebar-content-field-border-width: $o-we-item-border-width !default;
$o-we-sidebar-content-field-border-color:$o-we-item-border-color !default;
$o-we-sidebar-content-field-border-radius: $o-we-item-border-radius !default;
$o-we-sidebar-content-field-disabled-color: $o-we-sidebar-content-field-control-item-color !default;
$o-we-sidebar-content-field-clickable-bg: $o-we-item-clickable-bg !default;
$o-we-sidebar-content-field-clickable-color: $o-we-item-clickable-color !default;
$o-we-sidebar-content-field-clickable-spacing: $o-we-sidebar-content-field-label-spacing !default;
$o-we-sidebar-content-field-pressed-bg: $o-we-item-pressed-bg !default;
$o-we-sidebar-content-field-pressed-color: $o-we-item-pressed-color !default;

$o-we-sidebar-content-field-dropdown-spacing: $o-we-dropdown-spacing !default;
$o-we-sidebar-content-field-dropdown-bg: $o-we-dropdown-bg !default;
$o-we-sidebar-content-field-dropdown-border-width: $o-we-dropdown-border-width !default;
$o-we-sidebar-content-field-dropdown-border-color: $o-we-dropdown-border-color !default;
$o-we-sidebar-content-field-dropdown-shadow: $o-we-dropdown-shadow !default;
$o-we-sidebar-content-field-dropdown-item-height: $o-we-dropdown-item-height !default;
$o-we-sidebar-content-field-dropdown-item-spacing: $o-we-dropdown-item-spacing !default;
$o-we-sidebar-content-field-dropdown-item-bg: $o-we-dropdown-item-bg !default;
$o-we-sidebar-content-field-dropdown-item-bg-hover: $o-we-dropdown-item-bg-hover !default;
$o-we-sidebar-content-field-dropdown-item-color: $o-we-dropdown-item-color !default;
$o-we-sidebar-content-field-dropdown-item-hover-color: $o-we-dropdown-item-hover-color !default;
$o-we-sidebar-content-field-dropdown-item-active-bg: $o-we-dropdown-item-active-bg !default;
$o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default;
$o-we-sidebar-content-field-dropdown-grid-item-height: 60px !default;
$o-we-sidebar-content-field-dropdown-grid-item-width: 80px !default;

$o-we-sidebar-content-field-colorpicker-size: 20px !default;
$o-we-sidebar-content-field-colorpicker-size-large: 26px !default;
$o-we-sidebar-content-field-colorpicker-shadow: inset 0 0 0 1px rgba(white, 0.5) !default;
$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-lighter !default;
$o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !default;
$o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !default;
$o-we-sidebar-content-field-colorpicker-cc-width: 208px !default;
$o-we-sidebar-content-field-colorpicker-cc-height: 26px !default;

$o-we-sidebar-content-field-input-max-width: 60px !default;
$o-we-sidebar-content-field-input-bg: $o-we-bg-light !default;
$o-we-sidebar-content-field-input-font-family: $o-we-font-family !default;
$o-we-sidebar-content-field-input-unit-font-size: 11px !default;
$o-we-sidebar-content-field-input-border-color: $o-we-color-accent !default;

$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing;

$o-we-sidebar-content-field-progress-height: 4px !default;
$o-we-sidebar-content-field-progress-control-height: 10px !default;
$o-we-sidebar-content-field-progress-color: $o-we-fg-darker !default;
$o-we-sidebar-content-field-progress-active-color: $o-we-color-accent !default;

$o-we-sidebar-content-field-toggle-width: 20px !default;
$o-we-sidebar-content-field-toggle-height: 12px !default;
$o-we-sidebar-content-field-toggle-bg: $o-we-fg-darker !default;
$o-we-sidebar-content-field-toggle-active-bg: $o-we-color-accent !default;
$o-we-sidebar-content-field-toggle-control-width: 11px !default;
$o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-toggle-height - 2px !default;
$o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default;

// Apply colors according to the given identifier. Can either be a preset
// number, a color name or a css color.
@mixin o-apply-colors($identifier, $with-extras: true, $background: $body-bg) {
    $-related-color: o-related-color($identifier, $max-recursions: 10);
    @if type-of($-related-color) == 'number' {
        // This is a preset to be applied, just extend it. This should probably
        // be avoided and use the class in XML if possible.
        @extend .o_cc;
        @extend .o_cc#{$-related-color};
    } @else {
        @include o-bg-color(o-color($-related-color), $with-extras: $with-extras, $background: $background, $important: false);
    }
}

@function o-make-palette($-primary, $-secondary: null, $-overrides-map: null) {
    $-o-color-2: $-secondary or increase-contrast(desaturate(mix(complement($-primary), #FFFFFF, 80%), 20%), $-primary);

    $-palette: (
        'o-color-1': $-primary,
        'o-color-2': $-o-color-2,
        'o-color-3': change-color(#F5F0F0, $hue: hue($-primary), $saturation: min(saturation($-primary), saturation(#F5F0F0))),
        'o-color-4': #FFFFFF,
        'o-color-5': change-color(#2e1414, $hue: hue($-primary), $saturation: min(saturation($-primary), saturation(#2e1414))),
    );

    // Check if primary/dark contrast is enough. If not adapt cc4 & cc5 schemes accordingly
    @if not (has-enough-contrast(map-get($-palette, 'o-color-5'), map-get($-palette, 'o-color-1'), 300)) {
        @each $-cc in (4, 5) {
            $-palette: map-merge($-palette, (
                'o-cc#{$-cc}-btn-primary': 'o-color-4',
                'o-cc#{$-cc}-btn-secondary': 'o-color-2',
                'o-cc#{$-cc}-text': 'o-color-3',
                'o-cc#{$-cc}-link': 'o-color-4'
            ));
        }
    }

    @if $-overrides-map {
        $-palette: map-merge($-palette, $-overrides-map);
    }

    @return $-palette;
}

// ------------------------------------------------------------------
// Shapes
// ------------------------------------------------------------------

$o_shape_connection_size_tiny: 2rem !default;
$o_shape_connection_size_regular: 4rem !default;
$o_shape_connection_size_big: 15rem !default;
$o_shape_angular_size_regular: 15rem !default;
$o_shape_wavy_size_regular: 15rem !default;
$o_shape_pattern_size_tiny: o-to-rem(200px) !default;
$o_shape_pattern_size_regular: o-to-rem(800px) !default;

.o_we_shape {
    --ShapeConnections--size-tiny: #{$o_shape_connection_size_tiny};
    --ShapeConnections--size-regular: #{$o_shape_connection_size_regular};
    --ShapeConnections--size-big: #{$o_shape_connection_size_big};
    --ShapeAngular--size-regular: #{$o_shape_angular_size_regular};
    --ShapeWavy--size-regular: #{$o_shape_wavy_size_regular};
    --ShapePattern--size-tiny: #{$o_shape_pattern_size_tiny};
    --ShapePattern--size-regular: #{$o_shape_pattern_size_regular};
}

.o_we_shape_btn_content .o_we_shape {
    --ShapeConnections--size-tiny: 25%;
    --ShapeConnections--size-regular: 50%;
    --ShapeConnections--size-big: 75%;
    --ShapeAngular--size-regular: 50%;
    --ShapePattern--size-regular: 100%;
    --ShapePattern--size-tiny: 50%;
    --ShapeWavy--size-regular: 100%;
}

// Regroups bg shapes available in the Web editor
// format: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...))
$o-bg-shapes-current: (
    'Airy/01_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Airy/02_001': ('position': top, 'size': 100% 100%, 'colors': (5)),
    'Airy/06_001': ('position': left bottom, 'size': 100% auto, 'colors': (5)),
    'Airy/07_001': ('position': top, 'size': 100% auto, 'colors': (5)),
    'Airy/08_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Airy/09_001': ('position': top, 'size': 100% auto, 'colors': (5)),
    'Airy/10_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Airy/11_001': ('position': top, 'size': 100% auto, 'colors': (5)),
    'Airy/12_002': ('position': top, 'size': 100% auto, 'colors': (5, 3)),
    'Airy/13_002': ('position': bottom, 'size': 100% auto, 'colors': (5, 3)),
    'Airy/14_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Airy/15': ('position': 150% center, 'size': 85% auto, 'colors': (5)),
    'Airy/16': ('position': center right, 'size': 50% 100%, 'colors': (5)),
    'Airy/17': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Angular/01': ('position': right bottom, 'size': auto 75%, 'colors': (5)),
    'Angular/02': ('position': left bottom, 'size': auto 75%, 'colors': (5)),
    'Angular/03': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Angular/04': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Angular/05': ('position': bottom, 'size': 100% var(--ShapeAngular--size-regular), 'colors': (5)),
    'Angular/06': ('position': bottom, 'size': 100% var(--ShapeAngular--size-regular), 'colors': (1, 3, 5)),
    'Angular/07': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Angular/08': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Angular/09': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Blobs/01_001': ('position': top, 'size': 100% auto, 'colors': (2)),
    'Blobs/02': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)),
    'Blobs/03': ('position': top, 'size': 100% auto, 'colors': (2)),
    'Blobs/04_001': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Blobs/05_001': ('position': bottom, 'size': 100% auto, 'colors': (1)),
    'Blobs/06_001': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Blobs/10_002': ('position': right, 'size': 100% 100%, 'colors': (5)),
    'Blobs/13': ('position': bottom, 'size': 100% 100%, 'colors': (1,5)),
    'Blobs/14': ('position': bottom, 'size': 100% auto, 'colors': (1,5)),
    'Blobs/15': ('position': top, 'size': 100% auto, 'colors': (1,5)),
    'Blobs/16': ('position': top, 'size': 100% 100%, 'colors': (5)),
    'Blobs/17': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Blobs/18': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Blocks/01_001': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5)),
    'Blocks/02_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5)),
    'Blocks/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3, 5)),
    'Blurry/01': ('position': center, 'size': 100% 100%, 'colors': (1)),
    'Blurry/02': ('position': center, 'size': 100% 100%, 'colors': (1)),
    'Blurry/03': ('position': bottom, 'size': 100% auto, 'colors': (1,2,3,4)),
    'Blurry/04': ('position': top, 'size': 100% auto, 'colors': (1,2,3)),
    'Blurry/05': ('position': center, 'size': 100% 100%, 'colors': (1,2,4)),
    'Blurry/06': ('position': center, 'size': 100% 100%, 'colors': (1,4)),
    'Bold/01_001': ('position': top, 'size': 100% auto, 'colors': (5)),
    'Bold/13': ('position': bottom, 'size': 100% 50%, 'colors': (5)),
    'Bold/14': ('position': center, 'size': 100%, 'colors': (1, 5)),
    'Bold/15': ('position': top, 'size': 100% 50%, 'colors': (5)),
    'Bold/16': ('position': center, 'size': 100%, 'colors': (5)),
    'Bold/17': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Bold/18': ('position': top, 'size': 100% 50%, 'colors': (5)),
    'Bold/19': ('position': left top, 'size': 100% 12rem, 'colors': (5)),
    'Bold/20': ('position': center, 'size': 100%, 'colors': (1, 5)),
    'Bold/21': ('position': right bottom, 'size': 100% auto, 'colors': (5)),
    'Bold/22': ('position': right top, 'size': 100% auto, 'colors': (5)),
    'Bold/23': ('position': center, 'size': 100%, 'colors': (5)),
    'Connections/01': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/02': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/03': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/04': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/05': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/06': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/07': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/08': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/09': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/10': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/11': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/12': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/13': ('position': bottom, 'size': 100%, 'colors': (5)),
    'Connections/14': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/15': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/16': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/17': ('position': bottom, 'size': var(--ShapeConnections--size-tiny), 'colors': (5), 'repeat-x': true),
    'Connections/18': ('position': bottom, 'size': var(--ShapeConnections--size-tiny), 'colors': (5), 'repeat-x': true),
    'Connections/19': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
    'Connections/20': ('position': bottom, 'size': 100% var(--ShapeConnections--size-big), 'colors': (5)),
    'Containers/01': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Containers/02': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Containers/03': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Containers/04': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Containers/05': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Containers/06': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Floats/01': ('position': center right, 'size': auto 100%, 'colors': (1, 2, 3, 4, 5)),
    'Floats/02': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5)),
    'Floats/03': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5)),
    'Floats/04': ('position': center, 'size': 100%, 'colors': (1, 2, 4, 5)),
    'Floats/05': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5)),
    'Floats/06': ('position': center, 'size': auto 100%, 'colors': (1, 2, 3, 5)),
    'Floats/07': ('position': right bottom, 'size': auto 100%, 'colors': (1, 2, 3, 5)),
    'Floats/08': ('position': top left, 'size': auto 100%, 'colors': (1, 2, 3, 5)),
    'Floats/09': ('position': center right, 'size': auto 100%, 'colors': (1, 2, 3)),
    'Floats/10': ('position': center, 'size': 100% auto, 'colors': (1, 2, 3, 5)),
    'Floats/11': ('position': center, 'size': 100% 100%, 'colors': (1, 3)),
    'Floats/12': ('position': top, 'size': 100% auto, 'colors': (1, 2, 3, 5), 'repeat-y': true),
    'Floats/13': ('position': center, 'size': auto 100%, 'colors': (1, 2, 5)),
    'Floats/14': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5), 'repeat-y': true),
    'Grids/01': ('position': bottom, 'size': 100% 50%, 'colors': (5)),
    'Grids/02': ('position': right center, 'size': 50% 100%, 'colors': (5)),
    'Grids/03': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Grids/04': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Grids/05': ('position': center, 'size': auto 100%, 'colors': (5)),
    'Grids/06': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Grids/07': ('position': right center, 'size': auto 100%, 'colors': (5)),
    'Grids/08': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Patterns/01': ('position': top, 'size': var(--ShapePattern--size-regular) auto, 'colors': (5), 'repeat-y': true, 'repeat-x': true),
    'Patterns/02': ('position': top, 'size': var(--ShapePattern--size-regular) auto, 'colors': (5), 'repeat-y': true, 'repeat-x': true),
    'Patterns/03': ('position': top, 'size': var(--ShapePattern--size-regular) auto, 'colors': (5), 'repeat-y': true, 'repeat-x': true),
    'Patterns/04': ('position': center, 'size': var(--ShapePattern--size-tiny) auto, 'colors': (5), 'repeat-y': true, 'repeat-x': true),
    'Patterns/05': ('position': center, 'size': var(--ShapePattern--size-regular) auto, 'colors': (5), 'repeat-y': true, 'repeat-x': true),
    'Rainy/01_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)),
    'Rainy/02_001': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5)),
    'Rainy/06': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3)),
    'Rainy/07': ('position': top, 'size': 100% auto, 'colors': (1, 2, 3)),
    'Rainy/08_001': ('position': top, 'size': 100% auto, 'colors': (1, 4)),
    'Rainy/09_001': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Rainy/10': ('position': center, 'size': 100% auto, 'colors': (1, 3)),
    'Wavy/03': ('position': top, 'size': 100% auto, 'colors': (1, 2)),
    'Wavy/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)),
    'Wavy/08_001': ('position': top, 'size': 100% auto, 'colors': (5)),
    'Wavy/09_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Wavy/10': ('position': center, 'size': 100% auto, 'colors': (1, 2)),
    'Wavy/11_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Wavy/18': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Wavy/22_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Wavy/24': ('position': center, 'size': 100% auto, 'colors': (1, 2)),
    'Wavy/26': ('position': bottom right, 'size': auto 100%, 'colors': (1, 2)),
    'Wavy/27': ('position': center, 'size': 100% auto, 'colors': (1, 2)),
    'Wavy/29': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Wavy/30': ('position': bottom, 'size': 100% var(--ShapeWavy--size-regular), 'colors': (1, 3, 5)),
    'Wavy/31': ('position': bottom, 'size': 100% var(--ShapeWavy--size-regular), 'colors': (1, 3, 5)),
    'Zigs/01_001': ('position': bottom, 'size': 100% auto, 'colors': (2)),
);

// TODO: Ensures that discontinued shapes are not imported into new databases
// Regroups old bg shapes kept for compatibility
// format: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...))
$o-bg-shapes-discontinued: (
    'Airy/01': ('position': bottom, 'size': 100% auto, 'colors': (1)),
    'Airy/02': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Airy/03': ('position': top, 'size': 100% auto, 'colors': (5)),
    'Airy/03_001': ('position': top, 'size': 100% auto, 'colors': (5)),
    'Airy/04': ('position': center, 'size': 100% 100%, 'colors': (1)),
    'Airy/04_001': ('position': center, 'size': 100% 100%, 'colors': (1)),
    'Airy/05': ('position': center, 'size': 100% 100%, 'colors': (1)),
    'Airy/05_001': ('position': center, 'size': 100% 100%, 'colors': (1)),
    'Airy/06': ('position': bottom, 'size': 100% auto, 'colors': (2)),
    'Airy/07': ('position': top, 'size': 100% auto, 'colors': (2)),
    'Airy/08': ('position': bottom, 'size': 100% auto, 'colors': (1)),
    'Airy/09': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Airy/10': ('position': bottom, 'size': 100% auto, 'colors': (5)),
    'Airy/11': ('position': top, 'size': 100% auto, 'colors': (5)),
    'Airy/12': ('position': top, 'size': 100% auto, 'colors': (1, 3)),
    'Airy/12_001': ('position': top, 'size': 100% auto, 'colors': (1, 3)),
    'Airy/13': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)),
    'Airy/13_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)),
    'Airy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)),
    'Blobs/01': ('position': top, 'size': 100% auto, 'colors': (2)),
    'Blobs/04': ('position': center, 'size': 100% auto, 'colors': (5)),
    'Blobs/05': ('position': bottom, 'size': 100% auto, 'colors': (1)),
    'Blobs/06': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Blobs/07': ('position': top, 'size': 100% auto, 'colors': (5)),
    'Blobs/08': ('position': right, 'size': 100% auto, 'colors': (1)),
    'Blobs/09': ('position': bottom, 'size': 100% auto, 'colors': (3)),
    'Blobs/10': ('position': top, 'size': 100% auto, 'colors': (1, 5)),
    'Blobs/10_001': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Blobs/11': ('position': center, 'size': 100% auto, 'colors': (1)),
    'Blobs/12': ('position': bottom, 'size': 100% auto, 'colors': (1)),
    'Blocks/01': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5)),
    'Blocks/02': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5)),
    'Blocks/03': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)),
    'Bold/01': ('position': top, 'size': 100% auto, 'colors': (2)),
    'Bold/02': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3)),
    'Bold/03': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5)),
    'Bold/04': ('position': top, 'size': 100% auto, 'colors': (2, 3)),
    'Bold/05': ('position': center, 'size': 100% auto, 'colors': (5)),
    'Bold/05_001': ('position': center, 'size': 100% auto, 'colors': (3)),
    'Bold/06': ('position': center, 'size': 100% auto, 'colors': (5)),
    'Bold/06_001': ('position': center, 'size': 100% auto, 'colors': (3)),
    'Bold/07': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)),
    'Bold/07_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)),
    'Bold/08': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Bold/09': ('position': bottom, 'size': 100% auto, 'colors': (2, 3)),
    'Bold/10': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5)),
    'Bold/10_001': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5)),
    'Bold/11': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3)),
    'Bold/11_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)),
    'Bold/12': ('position': center, 'size': 100% auto, 'colors': (1, 2, 5)),
    'Bold/12_001': ('position': center, 'size': 100% auto, 'colors': (1, 2, 5)),
    'Origins/01': ('position': bottom, 'size': 100% auto, 'colors': (2, 5)),
    'Origins/02': ('position': bottom, 'size': 100% auto, 'colors': (3)),
    'Origins/02_001': ('position': bottom, 'size': 100% auto, 'colors': (4, 5)),
    'Origins/03': ('position': top, 'size': 100% auto, 'colors': (3)),
    'Origins/04': ('position': bottom, 'size': 100% auto, 'colors': (3)),
    'Origins/04_001': ('position': top, 'size': 100% 100%, 'colors': (3)),
    'Origins/05': ('position': top, 'size': 100% auto, 'colors': (3)),
    'Origins/06': ('position': center, 'size': 100% auto, 'colors': (3)),
    'Origins/06_001': ('position': center, 'size': 100% auto, 'colors': (3, 4)),
    'Origins/07': ('position': center, 'size': 100% 100%, 'colors': (3)),
    'Origins/07_001': ('position': center, 'size': 100% 100%, 'colors': (3, 5)),
    'Origins/07_002': ('position': center, 'size': 100% 100%, 'colors': (3, 4, 5)),
    'Origins/08': ('position': bottom, 'size': 100% auto, 'colors': (3)),
    'Origins/09': ('position': top, 'size': 100% auto, 'colors': (1, 5)),
    'Origins/09_001': ('position': top, 'size': 100% auto, 'colors': (3)),
    'Origins/10': ('position': bottom, 'size': 100% auto, 'colors': (2, 5)),
    'Origins/11': ('position': top, 'size': 100% auto, 'colors': (3, 5)),
    'Origins/11_001': ('position': top, 'size': 100% auto, 'colors': (3, 4)),
    'Origins/12': ('position': top, 'size': 100% auto, 'colors': (3, 5)),
    'Origins/13': ('position': center, 'size': 100% auto, 'colors': (3, 5)),
    'Origins/14': ('position': bottom, 'size': 100% auto, 'colors': (4)),
    'Origins/14_001': ('position': bottom, 'size': 100% auto, 'colors': (3, 4)),
    'Origins/15': ('position': top, 'size': 100% auto, 'colors': (4)),
    'Origins/16': ('position': center, 'size': 100% 100%, 'colors': (3)),
    'Origins/17': ('position': center, 'size': 100% 100%, 'colors': (3)),
    'Origins/18': ('position': center, 'size': 100% 100%, 'colors': (1)),
    'Origins/19': ('position': center, 'size': 100% 100%, 'colors': (5)),
    'Rainy/01': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)),
    'Rainy/02': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5)),
    'Rainy/03': ('position': top, 'size': 100% auto, 'colors': (2, 4, 5), 'repeat-y': true),
    'Rainy/03_001': ('position': top, 'size': 100% auto, 'colors': (2, 5), 'repeat-y': true),
    'Rainy/04': ('position': top, 'size': 100% auto, 'colors': (1, 5)),
    'Rainy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5)),
    'Rainy/05_001': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Rainy/08': ('position': top, 'size': 100% auto, 'colors': (1, 4)),
    'Rainy/09': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Wavy/01': ('position': bottom, 'size': 100% auto, 'colors': (4)),
    'Wavy/01_001': ('position': bottom, 'size': 100% auto, 'colors': (3)),
    'Wavy/02': ('position': top, 'size': 100% auto, 'colors': (4)),
    'Wavy/02_001': ('position': top, 'size': 100% auto, 'colors': (3)),
    'Wavy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5)),
    'Wavy/06': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5)),
    'Wavy/06_001': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5)),
    'Wavy/07': ('position': top, 'size': 100% auto, 'colors': (3)),
    'Wavy/08': ('position': top, 'size': 100% auto, 'colors': (2)),
    'Wavy/09': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)),
    'Wavy/11': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)),
    'Wavy/12': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Wavy/12_001': ('position': bottom, 'size': 100% auto, 'colors': (1)),
    'Wavy/13': ('position': bottom, 'size': 100% auto, 'colors': (4)),
    'Wavy/13_001': ('position': bottom, 'size': 100% auto, 'colors': (1)),
    'Wavy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 3)),
    'Wavy/15': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Wavy/16': ('position': bottom, 'size': 100% auto, 'colors': (1)),
    'Wavy/17': ('position': top, 'size': 100% auto, 'colors': (1)),
    'Wavy/19': ('position': top, 'size': 100% auto, 'colors': (5)),
    'Wavy/20': ('position': bottom, 'size': 100% auto, 'colors': (2)),
    'Wavy/21': ('position': top, 'size': 100% auto, 'colors': (2)),
    'Wavy/22': ('position': bottom, 'size': 100% auto, 'colors': (3)),
    'Wavy/23': ('position': top, 'size': 100% auto, 'colors': (3)),
    'Wavy/25': ('position': top, 'size': 100% auto, 'colors': (1, 2)),
    'Wavy/28': ('position': center, 'size': 100% 100%, 'colors': (1, 3)),
    'Zigs/01': ('position': bottom, 'size': 100% auto, 'colors': (2)),
    'Zigs/02': ('position': bottom, 'size': 100% auto, 'colors': (2)),
    'Zigs/02_001': ('position': bottom, 'size': 100% auto, 'colors': (2)),
    'Zigs/03': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': true),
    'Zigs/04': ('position': bottom, 'size': 100% auto, 'colors': (1)),
    'Zigs/05': ('position': bottom, 'size': 100% auto, 'colors': (3)),
    'Zigs/06': ('position': bottom, 'size': 30px 100%, 'colors': (4, 5), 'repeat-x': true),
);

// Combines current and old bg shapes in a single map
// format: (module_name: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...))
$o-bg-shapes: (
    'web_editor': (map-merge($o-bg-shapes-current, $o-bg-shapes-discontinued)),
    'html_builder': (map-merge($o-bg-shapes-current, $o-bg-shapes-discontinued)),
);

@function change-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) {
    $-module-shapes: map-get($shapes, $module);
    $-modified-module-shapes: map-merge($-module-shapes, (
        $shape-name: map-merge(map-get($-module-shapes, $shape-name), ('color-to-cc-bg-map': $mapping)),
    ));
    @return map-merge($shapes, (
        $module: $-modified-module-shapes,
    ));
}

@function add-extra-shape-colors-mapping($module, $shape-name, $mapping-name, $mapping, $shapes: $o-bg-shapes) {
    $-module-shapes: map-get($shapes, $module);
    $-shape-data: map-get($-module-shapes, $shape-name);
    $-extra-mappings: map-get($-shape-data, 'extra-mappings') or ();
    $-modified-module-shapes: map-merge($-module-shapes, (
        $shape-name: map-merge($-shape-data, ('extra-mappings': map-merge($-extra-mappings, ($mapping-name: $mapping)))),
    ));
    @return map-merge($shapes, (
        $module: $-modified-module-shapes,
    ));
}

@function add-header-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) {
    @return add-extra-shape-colors-mapping($module, $shape-name, 'header', $mapping, $shapes);
}

@function add-footer-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) {
    @return add-extra-shape-colors-mapping($module, $shape-name, 'footer', $mapping, $shapes);
}

%o-hb-input-base {
    border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
    border-radius: $o-we-sidebar-content-field-border-radius;
    background-color: var(--o-hb-field-input-bg, #{$o-we-sidebar-content-field-input-bg});
    padding: 0.15rem $o-we-sidebar-content-field-clickable-spacing;
    color: inherit;

    &:focus, &:focus-within {
        border-color: var(--o-hb-input-active-border, #{$o-we-sidebar-content-field-input-border-color});
        color: var(--o-hb-row-color-active, #{$o-we-fg-lighter});
    }
}