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

//------------------------------------------------------------------------------
// Odoo Editor UI
//------------------------------------------------------------------------------

$o-we-bg-darkest: #000000 !default;
$o-we-bg-darker: #141217 !default;
$o-we-bg-dark: #191922 !default;
$o-we-bg-light: #2b2b33 !default;
$o-we-bg-lighter: #3e3e46 !default;
$o-we-bg-lightest: #595964 !default;

$o-we-fg-darker: #9d9d9d !default;
$o-we-fg-dark: #C6C6C6 !default;
$o-we-fg-light: #D9D9D9 !default;
$o-we-fg-lighter: #FFFFFF !default;

$o-we-color-danger: #e6586c !default;
$o-we-color-warning: #f0ad4e !default;
$o-we-color-success: #00ff9e !default;
$o-we-color-info: #6999a8 !default;
$o-we-color-accent: #01bad2 !default;
$o-we-color-global: #dbfe5c !default;
$o-we-color-primary: $o-brand-primary !default;

$o-we-bg: $o-we-bg-light !default;
$o-we-color: $o-we-fg-light !default;
$o-we-font-size: 12px !default;
$o-we-font-size-sm: 11px !default;
$o-we-font-size-xs: 10px !default;
$o-we-font-size-lg: 13px !default;
$o-we-font-family: "-apple-system", "Roboto", $o-font-family-sans-serif !default;
$o-we-font-monospace: "Fira_Mono", $o-font-family-monospace !default;

$o-we-border-width: 1px !default;
$o-we-border-color: $o-we-bg-light !default;

// Translations
$o-we-content-to-translate-color: rgba(255, 255, 90, 0.5) !default;
$o-we-translated-content-color: rgba(120, 215, 110, 0.5) !default;

$o-we-item-spacing: 8px !default;
$o-we-item-border-width: 1px !default;
$o-we-item-border-color: $o-we-bg-darker !default;
$o-we-item-border-radius: 4px !default;
$o-we-item-clickable-bg: $o-we-bg-lightest!default;
$o-we-item-clickable-color: $o-we-fg-light!default;
$o-we-item-clickable-hover-bg: $o-we-bg-lighter!default;
$o-we-item-pressed-bg: $o-we-bg-light !default;
$o-we-item-pressed-color: $o-we-fg-lighter !default;

//------------------------------------------------------------------------------
// Preview component Mixins
//------------------------------------------------------------------------------

@mixin o-we-preview-box($color-text: white) {
    border-top: 1px solid black;
    border-bottom: 1px solid white;
    background-image: linear-gradient(-150deg, $o-we-bg-light, $o-we-bg-dark);

    color:  $color-text;
}

// ------------------------------------------------------------------
// Selection wrapper
// ------------------------------------------------------------------

@mixin o-we-active-wrapper($icon: '\f00c', $top: auto, $right: auto, $bottom: auto, $left: auto) {
    box-shadow: 0 0 0 3px $o-brand-primary;

    &:not(.fa) {
        border: 3px solid $o-brand-primary;
        box-shadow: none;
        &:before {
            content: $icon;
            @include o-position-absolute($top, $right, $bottom, $left);
            width: 19px;
            height: 19px;
            background-color: $o-brand-primary;
            font-family: 'FontAwesome';
            color: white;
            border-radius: 50%;
            text-align: center;
            z-index: 1;
            box-shadow: $box-shadow;
        }
    }
}

//------------------------------------------------------------------------------
// Edited content
//------------------------------------------------------------------------------

$o-support-13-0-color-system: false !default;

$o-checklist-margin-left: 20px;
$o-checklist-checkmark-width: 2px;
$o-checklist-before-size: 13px;


// Edition colors

// Note: the "base" palettes contain all possible keys a palette should or
// must contain, with a default value which should work in use cases where it
// will be used. Any palette defined by an app will be merged with the base
// palette once selected to ensure it works.

// Colors
$o-base-color-palette: (
    'o-color-1': transparent,
    'o-color-2': transparent,
    'o-color-3': transparent,
    'o-color-4': transparent,
    'o-color-5': transparent,
) !default;
$o-color-palettes: (
    'base-1': (
        'o-color-1': $o-enterprise-color,
        'o-color-2': #F0CDA8,
        'o-color-3': #F6F5F4,
        'o-color-4': #FFFFFF,
        'o-color-5': #1B1319,
    ),
    'base-2': (
        'o-color-1': #337ab7,
        'o-color-2': #e9ecef,
        'o-color-3': #F8F9FA,
        'o-color-4': #FFFFFF,
        'o-color-5': #343a40,
    ),
) !default;
$o-color-palette-name: 'base-1' !default;

// Theme colors
$o-base-theme-color-palette: () !default;
$o-theme-color-palettes: (
    // alpha -> epsilon are old color names kept for compatibility.
    // They should not be used in the code base anymore and ideally they will
    // not generate any classes for >= 13.4 databases.
    'base-1': (
        'alpha': $o-enterprise-action-color,
        'beta': $o-enterprise-color,
        'gamma': #5C5B80,
        'delta': #5B899E,
        'epsilon': #E46F78,
    ),
) !default;
$o-theme-color-palette-name: 'base-1' !default;

// Greyscale transparent colours

// Note: BS values are forced by default in every palette as the values can
// be used in bootstrap_overridden.scss files through the o-color function.
// Also, all of the gray colors generates bg- classes in Odoo so black and white
// are added for the same reason.

$o-base-gray-color-palette: (
    'white': #FFFFFF,
    '100': #F8F9FA,
    '200': #E9ECEF,
    '300': #DEE2E6,
    '400': #CED4DA,
    '500': #ADB5BD,
    '600': #6C757D,
    '700': #495057,
    '800': #343A40,
    '900': #212529,
    'black': #000000,
) !default;
$o-transparent-grays: (
    'black-15': rgba(black, 0.15),
    'black-25': rgba(black, 0.25),
    'black-50': rgba(black, 0.5),
    'black-75': rgba(black, 0.75),
    'white-25': rgba(white, 0.25),
    'white-50': rgba(white, 0.5),
    'white-75': rgba(white, 0.75),
    'white-85': rgba(white, 0.85),
) !default;
$o-gray-color-palettes: () !default;
$o-gray-color-palettes: map-merge($o-transparent-grays, $o-gray-color-palettes);
$o-gray-color-palette-name: '' !default;

// Color combinations
$o-base-color-combination: (
    'bg': 'white',
    'text': null, // Default to better contrast with the 'bg'
    'headings': null, // Default to 'text'
    'h2': null, // Default to 'h(x-1)'
    'h3': null,
    'h4': null,
    'h5': null,
    'h6': null,
    'link': null, // Default to BS 'primary' (= first odoo color)
    'btn-primary': null, // Default to BS 'primary' (= first odoo color)
    'btn-primary-border': null, // Default to 'btn-primary'
    'btn-secondary': null, // Default to BS 'secondary' (= second odoo color)
    'btn-secondary-border': null, // Default to 'btn-secondary'
);
$o-color-combinations-presets: (
    (
        (
            'bg': 'o-color-4',
        ),
        (
            'bg': 'o-color-3',
            'headings': 'o-color-5',
        ),
        (
            'bg': 'o-color-2',
            'btn-secondary': 'o-color-3',
        ),
        (
            'bg': 'o-color-1',
            'link': 'o-color-5',
            'btn-primary': 'o-color-5',
            'btn-secondary': 'o-color-3',
        ),
        (
            'bg': 'o-color-5',
            'headings': 'o-color-4',
            'btn-secondary': 'o-color-3',
        ),
    ),
) !default;
$o-color-combinations-preset-number: 1;

// We allow snippets to be colored and elements like card and columns to be
// colored as well. We need components targeted by those colored classes to
// use the deepest coloring element config. We only allow here for this to
// work for one level of nesting. Note: snippets which can contain other
// snippets will have problem because of this; this is a limitation of the
// system until a better solution is found.
$o-color-extras-nesting-selector: '&, .o_colored_level &';

// Function which returns if a color has contrast enough in comparaison to
// another given color.
@function has-enough-contrast($color1, $color2, $threshold: 500) {
    $r: (max(red($color1), red($color2))) - (min(red($color1), red($color2)));
    $g: (max(green($color1), green($color2))) - (min(green($color1), green($color2)));
    $b: (max(blue($color1), blue($color2))) - (min(blue($color1), blue($color2)));
    $sum-rgb: $r + $g + $b;
    @return ($sum-rgb >= $threshold);
}

// Function which transforms a color to increase its contrast in comparison to
// another given color.
@function increase-contrast($color1, $color2) {
    @if not $color1 or not $color2 {
        @return null;
    }
    $luma-c1: luma($color1);
    $luma-c2: luma($color2);
    $lightness-c1: lightness($color1);
    $lightness-inc: if($luma-c1 < $luma-c2, -1%, 1%);
    $i: 0;
    // Max 25% lightness change even if not contrasted enough
    @while ($lightness-c1 > 0.1% and $lightness-c1 < 99.9% and $i < 25 and not has-enough-contrast($color1, $color2)) {
        $color1: adjust-color($color1, $lightness: $lightness-inc);
        $lightness-c1: $lightness-c1 + $lightness-inc;
        $i: $i + 1;
    }
    @return $color1;
}