///
/// This file regroups basic style rules for web_editor enable page edition and backend utils.
///

html, body {position:relative;width:100%;height:100%}.css_non_editable_mode_hidden{display:none!important}.editor_enable .css_editable_mode_hidden{display:none!important}.note-toolbar{margin-left:0!important}.note-popover .popover>.arrow{display:none}#wrapwrap,.o_editable{// Only style editor-made tables (shop/portal/... tables are not supposed to
    // use table-bordered...)
    table.table.table-bordered {
        table-layout: fixed;
        td {
            min-width: 20px;
        }
    }
    @include media-breakpoint-down(sm) {
        .table-responsive > table.table {
            table-layout: auto;
        }
    }
}// Medias
img.shadow {box-shadow:0 3px 8px rgba(0,0,0,.2)}img.padding-small,.img.padding-small,span.fa.padding-small,iframe.padding-small{padding:4px}img.padding-medium,.img.padding-medium,span.fa.padding-medium,iframe.padding-medium{padding:8px}img.padding-large,.img.padding-large,span.fa.padding-large,iframe.padding-large{padding:16px}img.padding-xl,.img.padding-xl,span.fa.padding-xl,iframe.padding-xl{padding:32px}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa.d-block.mx-auto{text-align:center}div.media_iframe_video{margin:0 auto;text-align:center;position:relative;overflow:hidden;iframe {
        width: 100%;
        height: 100%;
        @include o-position-absolute($top: 0);
        margin: 0 auto;
        margin-left: -50%;
    }
    &.padding-small iframe {
        padding: 4px;
    }
    &.padding-medium iframe {
        padding: 8px;
    }
    &.padding-large iframe {
        padding: 16px;
    }
    &.padding-xl iframe {
        padding: 32px;
    }

    .media_iframe_video_size {
        padding-bottom: 66.5%;
        position: relative;
        width: 100%;
        height: 0;
    }

    .css_editable_mode_display {
        @include o-position-absolute;
        width: 100%;
        height: 100%;
        display: none;
        z-index: 2;
    }
}html[data-browser^="msie"] div.media_iframe_video iframe{margin-left:0}@include media-breakpoint-down(sm) {
    img, .media_iframe_video, span.fa, i.fa {
        transform: none !important;
    }
}// Fields
address {.fa.fa-mobile-phone {
        margin: 0 3px 0 2px;
    }
    .fa.fa-file-text-o {
        margin-right: 1px;
    }
}span[data-oe-type="monetary"]{white-space:nowrap}// Menus
// TODO should not be here but used by web_studio so must stay here for now
ul.oe_menu_editor {.oe_menu_placeholder {
        outline: 1px dashed #4183C4;
    }
    ul {
        list-style: none;
    }
    li div {
        cursor: move;
    }
}// Generate all spacings for all sizes
@mixin o-spacing-all($factor: 1) {// Generate vertical margin/padding classes used by the editor
    @for $i from 0 through (256 / 8) {
        @include o-vspacing($i * 8, $factor);
    }
    @include o-vspacing(4, $factor);// 92px vertical margin is kept for compatibility
    @include o-vmargins(92, $factor);// Some horizontal margin classes defined for convenience
    // (and compatibility)
    @include o-hmargins(0, $factor);@include o-hmargins(4, $factor);@include o-hmargins(8, $factor);@include o-hmargins(16, $factor);@include o-hmargins(32, $factor);@include o-hmargins(64, $factor)}// Generate all spacings for one size, scalled by a given factor
// (0 <= factor <= 1)
@mixin o-vspacing($name, $factor: 1) {@include o-vmargins($name, $factor);@include o-vpaddings($name, $factor)}@mixin o-vmargins($name, $factor: 1) {
    @include o-vmargins-define($name, $factor * $name);
}@mixin o-vpaddings($name, $factor: 1) {
    @include o-vpaddings-define($name, $factor * $name);
}@mixin o-hspacing($name, $factor: 1) {
    @include o-hmargins($name, $factor);
    @include o-hpaddings($name, $factor);
}@mixin o-hmargins($name, $factor: 1) {
    @include o-hmargins-define($name, $factor * $name);
}@mixin o-hpaddings($name, $factor: 1) {
    @include o-hpaddings-define($name, $factor * $name);
}// Generate all spacings for one size, given the name of the spacing and
// intended size
@mixin o-vmargins-define($name, $size: $name) {.mt#{$name} { margin-top: $size * 1px !important; }
    .mb#{$name} { margin-bottom: $size * 1px !important; }
}@mixin o-vpaddings-define($name, $size: $name) {
    .pt#{$name} { padding-top: $size * 1px !important; }
    .pb#{$name} { padding-bottom: $size * 1px !important; }
}@mixin o-hmargins-define($name, $size: $name) {
    .ml#{$name} { margin-left: $size * 1px !important; }
    .mr#{$name} { margin-right: $size * 1px !important; }
}@mixin o-hpaddings-define($name, $size: $name) {
    .pl#{$name} { padding-left: $size * 1px !important; }
    .pr#{$name} { padding-right: $size * 1px !important; }
}// Generate all margins
@include o-spacing-all;

// Underline
a.o_underline {text-decoration:underline;&:hover {
        text-decoration: underline;
    }
}// Extend bootstrap to create background and text utilities for gray colors too
@each $color, $value in $grays {@include bg-variant(".bg-#{$color}", $value);@include text-emphasis-variant(".text-#{$color}", $value)}