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

html, body {
    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;
}

/* ----- GENERIC LAYOUTING HELPERS ---- */
/* table */
#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;
        }
    }
    @media (max-width: $screen-xs-max) {
        .table-responsive > table.table {
            table-layout: auto;
        }
    }
}

// Medias
img.shadow {
    box-shadow: 0px 3px 8px rgba(0, 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.center-block {
    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;
}

@media (max-width: $screen-xs-max) {
    img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa {
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important;
        -o-transform: none !important;
        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);
    }
    @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;
    }
}

// Create classes for theme colors...
@include o-create-color-classes(alpha, $color-alpha);
@include o-create-color-classes(beta, $color-beta);
@include o-create-color-classes(gamma, $color-gamma);
@include o-create-color-classes(delta, $color-delta);
@include o-create-color-classes(epsilon, $color-epsilon);

// ... and button classes
@include o-create-color-btn-classes(alpha, $color-alpha);
@include o-create-color-btn-classes(beta, $color-beta);
@include o-create-color-btn-classes(gamma, $color-gamma);
@include o-create-color-btn-classes(delta, $color-delta);
@include o-create-color-btn-classes(epsilon, $color-epsilon);

// Create classes for UI colors
@include o-create-color-classes(primary, $brand-primary);
@include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text);
@include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text);
@include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text);
@include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text);

// Create classes for greyscale colors
@include o-create-color-classes('black', $gray-base);
@include o-create-color-classes('gray-darker', $gray-darker);
@include o-create-color-classes('gray-dark', $gray-dark);
@include o-create-color-classes('gray', $gray);
@include o-create-color-classes('gray-light', $gray-light);
@include o-create-color-classes('gray-lighter', $gray-lighter);
@include o-create-color-classes('white', $gray-white);

// Create classes for greyscale transparent colours
@include o-create-color-classes('black-25', $color-black-25);
@include o-create-color-classes('black-50', $color-black-50);
@include o-create-color-classes('black-75', $color-black-75);
@include o-create-color-classes('white-25', $color-white-25);
@include o-create-color-classes('white-50', $color-white-50);
@include o-create-color-classes('white-75', $color-white-75);