// INPUTS
.o_switch {
    .o-flex-display();
    .o-align-items(center);
    font-weight: normal;
    height: 1.5em;
    cursor: pointer;

    > input {
        display: none;

        + span {
            background: #bababa;
            border-radius: 0.4em;
            height: 1em;
            width: 2.5em;
            margin-right: 0.5em;
            display: inline-block;
            .transition(all 0.3s @o-we-md-ease);
            &:after {
                content: "";
                background: #fafafa;
                display: block;
                width: 1.5em;
                height: 1.5em;
                border-radius: 100em;
                margin-top: -0.3em;
                margin-left: -0.1em;
                .transition(all 0.3s @o-we-md-ease);
                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
            }
        }

        &:checked + span {
            background-color: rgb(142, 224, 212);
            background-color: transparentize(@odoo-brand-optional, 0.5);
            &:after {
                background-color: @odoo-brand-optional;
                margin-left: 1.1em;
            }
        }
    }
    &:hover > input + span:after {
        background-color: mix(@odoo-brand-optional, #fafafa);
    }
}
.text-input-group {
    position: relative;
    margin-bottom: 45px;

    input {
        font-size: 18px;
        padding: 10px 10px 10px 5px;
        display: block;
        width: 300px;
        border: none;
        border-bottom: 1px solid #757575;
    }
    input:focus { outline: none; }

    /* LABEL ======================================= */
    label {
        color: #999;
        font-size: 18px;
        font-weight: normal;
        .o-position-absolute(@top: 10px, @left: 5px);
        pointer-events: none;
        .transition(0.2s ease all)
    }

    /* active state */
    input:focus ~ label, input:valid ~ label {
        top: -20px;
        font-size: 14px;
        color: #5264AE;
    }

    /* BOTTOM BARS ================================= */
    .bar    { position: relative; display: block; width: 300px; }
    .bar:before, .bar:after {
        content: '';
        height: 2px;
        width: 0;
        bottom: 1px;
        .o-position-absolute();
        background: #5264AE;
        .transition(0.2s ease all);
    }
    .bar:before {
        left: 50%;
    }
    .bar:after {
        right: 50%;
    }

    /* active state */
    input:focus ~ .bar:before, input:focus ~ .bar:after {
        width: 50%;
    }

    /* HIGHLIGHTER ================================== */
    .highlight {
        .o-position-absolute(@top: 25%, @left: 0);
        height: 60%;
        width: 100px;
        pointer-events: none;
        opacity: 0.5;
    }

    /* active state */
    input:focus ~ .highlight {
        .animation(inputHighlighter 0.3s ease);
    }
}

// DRAG&DROP ANIMATIONS
.oe_snippet_body {
    opacity: 0;
    .o-animation(fadeInDownSmall, 700ms, @fill-mode: forwards);
}

// MODALS
body .modal {
    // SELECT MEDIA
    .o_select_media_dialog {
        width: 80%;

        .modal-body {
            li.search {
                float: right;

                ul.pager {
                    margin: 0;
                    > li > a {
                        border-radius: 3px;
                        margin-left: 2px;
                        padding: 6px 14px;
                    }
                }
                .form-group {
                    position: relative;
                    margin: 0 10px 0 0;
                    > input {
                        padding-right: 30px;
                    }
                    > span {
                        .o-position-absolute(7px, 7px);
                        font-size: 1.3em;
                    }
                }
            }
            .dropdown-toggle {
                line-height: 0;
                height: 34px;
            }
            .o_existing_attachment_cell {
                @odoo-border-image: 1px;
                .o_existing_attachment_remove {
                    .o-position-absolute(@odoo-border-image, 15px + @odoo-border-image);
                    padding: 3px 3px 12px 12px;
                    background-color: white;
                    border-bottom: 1px solid black;
                    border-left: 1px solid black;
                    border-radius: 0 0 0 100%;
                    opacity: 0.8;
                }
                .o_image {
                    border: @odoo-border-image solid transparent;
                    cursor: pointer;

                    &.o_webimage {
                        width: 100%;
                        height: auto;
                        background-image: none!important;
                    }
                }
                &.o_selected .o_image {
                    border-color: @odoo-brand-primary;
                    box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
                }
            }
            .font-icons-icons > span {
                font-size: 30px;
                margin: 5px;
                padding: 3px;
                cursor: pointer;

                &.o_selected {
                    box-shadow: 0px 0px 2px 2px @odoo-brand-secondary;
                }
            }
        }
    }

    // BACKGROUND IMAGE OPTIONS
    .o_bg_img_opt_modal .o_bg_img_opt {
        margin: 15px 0;

        .help-control {
            .o-position-absolute(15px, 15px);
        }
        .help {
            margin: 15px 0;

            .simulator {
                position: relative;
                float: left;
                margin-right: 15px;
                width: 120px;
                height: 100px;
                .bg {
                    .o-position-absolute(0, 0, 0, 0);
                    border: 1px dotted #888787;
                    background-image: url(/web/image);
                    background-position: center center;
                    .o-background-size(cover);
                }
                .el {
                    .o-position-absolute(10px, 0, 10px, 0);
                    border: 1px solid #222;
                }
                &.contain_bg {
                    .bg {
                        .o-position-absolute(0, 12px, 20px, 12px);
                    }
                    .el {
                        .o-position-absolute(0, 0, 20px, 0);
                    }
                }
            }
            + * {
                clear: left;
            }
        }

        .o_bg_img_opt_cover_edition {
            border-top: 1px solid black;
            border-bottom: 1px solid white;
            padding: 0px 25px 25px 25px;
            .o-linear-gradient(-150deg, lighten(#2c2c36, 5%), darken(#2c2c36, 10%));
            h6 {
                color: white;
                font-weight: bold;
            }
            .o_bg_img_opt_object {
                width: 100%;
                background: white;
                min-height: 10px;
                position: relative;
                overflow: hidden;
                box-shadow: 0 0 10px #000;
                > img {
                    cursor: crosshair;
                    border-top: 1px solid #5A5A5A;
                    border-bottom: 1px solid #111;
                }
                &:hover .o_focus_point:before {
                    opacity: 0.5;
                }
            }
            .o_bg_img_opt_ui_info {
                .animation(fadeInOut 2s ease forwards);
                .o-position-absolute(@bottom: 1px, @right: 0);
                display: block;
                padding: 3px 13px;
                background-color: rgba(255, 255, 255, 0.8);
                color: #333;
                text-align: center;
                font-weight: bold;
                pointer-events: none;
                span {
                    font-weight: normal;
                }
                .o_x {
                    margin-right: 10px
                }
            }
            .grid {
                .o-position-absolute(@top: 33.33%, @left: 0);
                display: block;
                width: 100%;
                height: 1px;
                background: fadeOut(lighten(@odoo-brand-optional, 30%), 50%);
                pointer-events: none;
                &.grid-2 {
                    top: 66.66%
                }
                &.grid-3 {
                    top: 0;
                    left: 33.33%;
                    width: 1px;
                    height: 100%
                }
                &.grid-4 {
                    top: 0;
                    left: 66.66%;
                    width: 1px;
                    height: 100%
                }
            }
            .o_focus_point {
                .o-position-absolute(@top: 0, @left: 0);
                width: 30px;
                height: 30px;
                border: 2px solid white;
                border-radius: 100%;
                margin-top: -15px;
                margin-left: -15px;
                box-shadow: 0 0 1px #333;
                pointer-events: none;
                &.o_with_transition {
                    .o-transition(all, 0.2s);
                }
                &:before {
                    pointer-events: none;
                    content: "";
                    display: block;
                    width: 100px;
                    height: 100px;
                    margin-top: -37px;
                    margin-left: -37px;
                    border: 1px solid #EAEAEA;
                    background: rgba(247, 76, 76, 0);
                    border-radius: 100em;
                    opacity: 1;
                    box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33);
                    .o-transition(opacity, 0.2s);
                }
            }
        }
    }
}