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

$o-we-font-family: Roboto, 'Montserrat', "Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif !default;

$o-we-color-dark: #2c2c36 !default;
$o-we-color-darker: darken($o-we-color-dark, 2%) !default;
$o-we-color-divider: #33363e !default;
$o-we-color-light: #4e525b !default;
$o-we-color-normal: #50545d !default;
$o-we-color-paper: #fcfcfc !default;
$o-we-color-text-normal: #999999 !default;
$o-we-color-text-light: #d4d5d7 !default;
$o-we-color-danger: #e6586c !default;
$o-we-color-warning: #f0ad4e !default;
$o-we-color-success: #40ad67 !default;
$o-we-color-info: #6999a8 !default;

$o-we-sidebar-width: 210px !default;

$o-we-tab-active-bg: #3D4048 !default;

// Transitions
$o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default;

// Editor
$o-we-dropzone-size: 40px !default;
$o-we-dropzone-border-width: 2px !default;
$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default;

$o-we-handle-edge-size: 1px !default;
$o-we-handle-border-width: 1px !default;
$o-we-handles-offset-to-hide: 10000px !default;
$o-we-handles-accent-color: #00e2ff !default;
$o-we-handles-btn-size: 18px !default;

$o-we-overlay-option-size: 25px !default;

$o-we-ace-color: #2F3129 !default;

$o-we-switch-size: 2ex !default;
$o-we-switch-inactive-color: $o-we-color-paper !default;

// ============    'Preview' component Mixins    ===============
// Create a "preview" work-area to edit/customize specific elements

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

    color:  $color-text;
}

@mixin o-we-preview-content {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 0 15px 2px #000;
}


// ============    Preservation mixins    ===============
// Used to preserve web_editor and website UI from themes customizations

@mixin o-w-preserve-base {
    font-family: $o-we-font-family;
    line-height: 1.5;
    color: $o-we-color-divider;

    .text-muted {
        color: $o-we-color-text-normal !important;
    }
}

@mixin o-w-preserve-headings {
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: $o-we-font-family;
        line-height: 1.5;
        color: $o-we-color-dark;
        font-weight: bold;
    }
}

@mixin o-w-preserve-links {
    a:not(.o_btn_preview) {
        color: $o-brand-primary;

        &:focus, &:active, &:focus:active {
            outline: none!important;
        }
    }

    .badge {
        &:hover a, a {
            color: #fff;
        }
    }
}

@mixin o-w-preserve-forms {
    :not(.input-group):not(.form-group):not(.input-group-append):not(.input-group-prepend) > .form-control {
        height: 34px;
    }
    .form-control {
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.5;
        border: 1px solid $o-we-color-text-light;
        color: #555;
        background-color: #fff;
        border-radius: 0;

        &.is-invalid {
            border-color: $danger;
        }
    }
    .input-group .form-control {
        height: auto;
    }
    .input-group-text {
        background-color: #e9ecef;
    }

    .was-validated {
        .form-control:invalid {
            border-color: $danger;
        }
    }

    select.form-control {
        appearance: none;
        background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4=');
        background-position: 100% 65%;
        background-repeat: no-repeat;
    }
}

@mixin o-w-preserve-modals {
    background: 0;

    .modal-content {
        border-radius: 0;
        background-color: $o-we-color-paper;

        .modal-header {
            border-bottom-color: #e9ecef;
        }
        .modal-body {
            background-color: white;
        }
        .modal-footer {
            border-top-color: #e9ecef;
            text-align: left;
        }
    }
}

@mixin o-w-preserve-tabs {
    .nav-tabs {
        border-bottom: 1px solid #e9ecef;

        > li  {
            > a {
                line-height: 1.5;
                color: $o-we-color-light;

                &:hover {
                    border-color: #dee2e6;
                }

                &.active {
                    &, &:hover, &:focus {
                        color: $o-we-color-normal;
                        background-color: $o-we-color-paper;
                        border-color: #dee2e6 #dee2e6 #FFFFFF;
                    }
                }
            }
        }
    }
}

@mixin o-w-preserve-btn {
    .btn:not(.o_btn_preview) {
        border-radius: 0;
        font-weight: normal;
        text-transform: none;
        @include button-size(.375rem, .75rem, 0.875rem, 1.5, 0);

        &.btn-primary {
            @include button-variant($o-brand-primary, $o-brand-primary);
        }
        &.btn-secondary {
            @include button-variant($o-we-color-paper, $o-we-color-paper);
            color: $o-brand-primary;
        }
        &.btn-link {
            @include button-variant($o-we-color-paper, $o-we-color-paper);
            color: $o-brand-primary;
        }
        &.btn-success {
            @include button-variant($o-we-color-success, $o-we-color-success);
        }
        &.btn-info {
            @include button-variant($o-we-color-info, $o-we-color-info);
        }
        &.btn-warning {
            @include button-variant($o-we-color-warning, $o-we-color-warning);
        }
        &.btn-danger {
            @include button-variant($o-we-color-danger, $o-we-color-danger);
        }
    }
}

@mixin o-w-preserve-cards {
    .card {
        padding: 19px;
        margin-bottom: 20px;
        background-color: $o-we-color-paper;
        border: 1px solid darken($o-we-color-paper, 5%);
        border-radius: 0;
        box-shadow: none;
    }
}

@mixin o-w-preserve-dropdown-menus {
    .dropdown-menu {
        background-color: white;
    }
    .dropdown-item {
        color: #212529;

        @include hover-focus {
            color: darken(#212529, 5%);
        }
        &.active,
        &:active {
            color: white;
            @include gradient-bg($o-brand-primary);
        }
    }
}

// Edition colors

// Colors
$o-color-palettes: (
    (

    ),
) !default;
$o-color-palette-number: 1;

// Theme colors
$o-theme-color-palettes: (
    (
        'alpha': $o-enterprise-primary-color,
        'beta': $o-enterprise-color,
        'gamma': #5C5B80,
        'delta': #5B899E,
        'epsilon': #E46F78,
    ),
) !default;
$o-theme-color-palette-number: 1;

// Greyscale transparent colours
$o-transparent-grays: (
    '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),
) !default;
$o-gray-color-palettes: (
    (
        'white': #FFFFFF, // Those two will enforce the creation of bg-white
        'black': #000000, // and bg-black classes.
    ),
) !default;
$o-gray-color-palette-number: 1;

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