// @fontface can not be scoped with a class, so the blow include
// of the oscar scss yield a broken font-face. This repairs the font-face
@import "fontfix";
//@import "old";

.select2-selection__rendered {
    background: var(--w-color-surface-page);
    border-color: var(--w-color-surface-page);
    color: var(--w-color-text-context);
}

.select2-results {
    background-color: var(--w-color-surface-page);
}

.select2-dropdown {
    background-color: var(--w-color-surface-page);
}

// Select2 clash with wagtail fixes
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color: var(--w-color-surface-menus);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--w-color-surface-menus);
}

.select2-selection--single,
.select2-selection--multiple{
    overflow: hidden;
}

.oscar{
    input{
        &[type=checkbox]:checked:before{
            background: var(--w-color-icon-primary) !important;
        }
        &.form-control{
            &:focus, &:focus-visible{
                box-shadow: 0 0 0 0.2rem var(--w-color-icon-primary) !important;
                border-color: var(--w-color-icon-primary-hover) !important;
                outline: unset !important;
            }
        }
    }
}

.oscar {
    // include oscar css in this context
    @import "oscardashboard";
    // undo the hardcoded bootstrap3 shit from wagtail
    @import "undobootstrap3";
    // Import fontawesome definitions in this context
    @import "fontawesome";

    // make it look like wagtail
    overflow-x: hidden;

    a {
        &:not(.button):hover{
            color: #035255;
        }
        &.button:hover{
            color: white;
        }
    }

    .button{
        &:not(.action-choose, .action-clear, .button-secondary){
            color: white;
        }
        &.bicolor{
            &:before{
                content: "";
                font-size: 1rem;
                position: absolute;
                left: 0;
                top: 0;
                width: 2em;
                height: 100%;
                text-align: center;
                background-color: #0003;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                border-top-left-radius: inherit;
                border-bottom-left-radius: inherit;
                line-height: unset;
            }
        }
    }

    .table {
        background: var(--w-color-surface-page);
        
        th, td {
            color: var(--w-color-text-context) !important;
        }
    }

    .fields{
        .field{
            display: flex;
            align-items: center;
            label{
                padding: 0rem 1rem 0rem 0rem;
            }
        }
    }

    .listing ul.actions{
        padding-left: 0;
    }

    .sticky-top{
        z-index: 10;
    }

    .badge{
        padding: 0.5rem 0.75rem;
        font-size: .8rem;
    }
    
    .form-control {
        background-color: var(--w-color-surface-field)!important;
        border: 1px solid var(--w-color-border-field-default);
        border-radius: .3125rem;
        color: var(--w-color-text-context)!important;
    }

    input[type=radio]{
        position: relative;
        &.form-control{
            position: relative;
            margin-right: 27px;
            border-radius: 100%;
            cursor: pointer;
        }
        &:after{
            content: "";
            border-radius: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            width: .75rem;
            height: .75rem;
            transform: translate(-50%, -50%);
            cursor: pointer;
            display: block;
            background-color: #fff;
            border: 0;
        }
        &:checked{
            &:before{
                display: none;
            }
            &:after{
                background-color: #007d7e;
            }
        }
    }

    //input[type=checkbox]{
//        background-color: white;
//    }

    #product_options{
        ul.nav-tabs{
            li.nav-item{
                a.nav-link{
                    color: #067d7e;
                }
            }
        }
    }

    .tabbable{
        ul.nav-tabs{
            li.active{
                a.nav-link{
                    color: #067d7e;
                }
            }
            li:not(.active){
                a.nav-link{
                    color: #495057;
                }
            }
        }
    }

    .related-widget-wrapper.single{
        margin-top: .5rem;
        margin-bottom: .5rem;
        select{
            margin-bottom: .5rem;
        }
    }

    ul.form-control{
        padding: 0;
        border: 0;
        margin: 0;
        align-items: center;
    }

    #order_note_form{
        .form-actions{
            @extend .mt-3;
        }
    }

    table:not(.table-sm), .table:not(.table-sm){
        caption{
            background: var(--w-color-surface-page);
            color: var(--w-color-text-context);
            padding: 1rem 0;
            border: 0;
            .btn-toolbar{
                display: block;
                width: 100%;
                .btn-group{
                    margin-right: .5rem;
                    margin-bottom: 1rem;
                }
            }
            a.btn.float-right{
                display: inline-block;
                margin-bottom: 1rem;
            }
        }
        thead, tbody{
            tr{
                border-style: dashed;
            }
        }
        thead{
            tr{
                border-style: solid;
                td, th{
                    padding: .6rem .5rem;
                }
            }
        }
    }

    table:not(.table-sm), .table:not(.table-sm){
        thead, tbody{
            tr{
                th, td{
                    border-left: 0;
                    border-right: 0;
                    vertical-align: middle;
                    line-height: 1.2;
                    background: unset;
                    padding: 1.2rem .5rem;
                    border: 0;
                }
            }
        }
    }

    .form-stacked.fixed-actions{
        .fixed-actions-group{
            .form-actions{
                display: flex;
                flex-wrap: wrap;
                flex-direction: row;
                a, button{
                    margin-bottom: 10px;
                    margin-right: 10px;
                }
            }
        }
    }

    .input-group.date{
        .input-group-text{
            height: calc(1.5em + 0.75rem + 2px);
        }
    }

    .btn-toolbar .dropdown .btn.btn-secondary.dropdown-toggle{
        background-color: var(--w-color-icon-primary);
        border-color: var(--w-color-icon-primary);
        &:focus{
            box-shadow: 0 0 0 0.25rem rgba(1,125,126,.3);
        }
    }

    .table-header{
        padding: 6px 0;
        margin-bottom: 15px;
        background: unset;
        border: 0;
        
        h3{
            font-size: 1.2em;
        }
    }
    .card{
        .card-body{
            border: 0;
            padding: 0;
            background: unset;
            display: block;
            button[name="show_preview"]{
                margin-bottom: 10px;
            }
        }
        background: var(--w-color-surface-page) !important;
    }
    
    .modal-content {
        background: var(--w-color-surface-page) !important;
        
    }
    
    .tabbable.dashboard {
        .nav-item {
            color: var(--w-color-text-label-menus-default);
            background: var(--w-color-surface-menus) !important;
            &.active {
                border: 1px solid white;
                a.nav-link {
                    font-weight: bold;
                    color: var(--w-color-text-label-menus-default);
                }
            }
        }
        .tab-content {
            background: var(--w-color-surface-page) !important;
        }
        
        .nav-link.active {
            background: var(--w-color-surface-menus) !important;
            color: #495057;
            border: none;
        }
    }

    // Sidebar styling
    .tab-nav{
        .table-header{
            padding: 9px 15px;
            border: unset;
            margin-bottom: 0;
            background: var(--w-color-surface-menus);
            h2, h3, h4{
                font-size: 1.25rem;
                color: white;
            }
        }
        .bs-docs-sidenav{
            .nav-item{
                margin: 0;
                padding-left: 0;
                &.active:hover{
                    
                }
                &.active{
                    background: #edf5f5;
                    .nav-link {
                        font-weight: bold;
                    }
                }
                .nav-link{
                    border: 1px solid var(--w-color-surface-field);
                    font-weight: unset;
                    font-size: .8rem;
                    max-height: unset;
                    color: var(--w-color-text-label-menus-default);
                    background: var(--w-color-surface-menus);
                    transition: .1s ease;
                    &:hover{
                        color: var(--w-color-text-label-menus-active);
                    }
                }
            }
        }
    }
    

    body{
        .form-group{
            margin-bottom: 1rem;
        }
    }

    .table-headers{
        .float-right{
            .form-inline{
                label{
                    margin-right: 1rem;
                }
                display: flex;
                flex-wrap: nowrap;
                & > span{
                    white-space: nowrap;
                }
                & > label{
                    white-space: nowrap;
                    padding: 0;
                }
                .form-check{
                    input{
                        height: 12px;
                        width: auto;
                        position: relative;
                        margin-right: 1.5rem;
                        &:before{
                            border: 0;
                            background: unset;
                            content: "";
                        }
                    }
                    label{
                        padding: 0;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    .form-inline{
        display: block;
        input[type=submit]{
            max-width: 100px;
        }
        .form-group{
            display: flex;
            align-items: center;
            width: 100%;
            margin-bottom: 1rem !important;
            label{
                display: block;
                float: none;
            }
            input[type=text]{
                width: 100%;
                max-width: 300px;
                &:focus{
                    border-color: #559c9d;
                    box-shadow: 0 0 0 0.2rem rgba(10,125,126,.5);
                }
            }
            .form-control{
                display: flex;
                div{
                    label{
                        width: 100%;
                        padding: 0;
                        display: flex;
                        margin-right: 15px;
                        input{
                            width: 20px;
                            height: 20px;
                            line-height: unset;
                            padding: 0;
                            margin-right: 5px;
                            &:before{
                                background: unset;
                                border: unset;
                                line-height: unset;
                                top: 1px;
                                left: 0;
                                padding: 0;
                                width: 19px;
                                height: 20px;
                            }
                        }
                    }
                }
            }
        }
    }

    input.form-control {
        background-color: var(--w-color-surface-field) !important;
        border: 1px solid var(--w-color-border-field-default);
        border-radius: .3125rem;
        color: var(--w-color-text-context) !important;;
        height: calc(1.5em + 0.75rem + 2px);
        &:focus{
            box-shadow: 0 0 0 0.2rem rgba(10,125,126,.5);
            border-color: #66a4a5;
        }
    }
    .controls{
        max-width: 100%;
    }
    #orders_form, #order_lines_form{
        table {
            tbody tr td input {
                padding: .9em 0;
                text-align: center;
            }
        }
    }
    #order_lines_form .card .form-inline {
        display: flex;
        .form-group {
            width: auto;
            label {
                padding: 0 1em;
            }
        }
    }
    .btn-reorder{
        display: none;
    }
    .form-check{
        .form-check-label{
            cursor: pointer;
        }
        .form-check-input{
            margin-left: unset;
            background-color: unset;
            label{
                box-sizing: border-box;
                display: inline;
                float: left;
                width: 16.66667%;
                padding-right: 0;
                padding-left: 0;
                padding-top: 0;
                padding-left: 0;
                input[type=radio]{
                    height: 12px;
                    width: auto;
                    position: relative !important;
                    margin-right: 24px;
                    &:before{
                        content: "";
                        border-radius: 100%;
                        font-family: wagtail;
                        font-style: normal;
                        text-align: center;
                        position: absolute;
                        top: -4px;
                        left: -2px;
                        cursor: pointer;
                        display: block;
                        width: 1em;
                        height: 1em;
                        line-height: 1.1em;
                        padding: 4px;
                        background-color: var(--w-color-surface-field);
                        border: 1px solid var(--w-color-border-field-default);
                        border-radius: .3125rem;
                        color: var(--w-color-text-context);
                        border: 0;
                    }
                    &:checked:before{
                        color: #007d7e;
                    }
                }
            }
        }
    }

    label{
        width: auto;
        float: none !important;
    }

    input[type="checkbox"]{
        appearance: none;
        background-color: var(--w-color-surface-field);
        border: 1px solid var(--w-color-border-field-default);
        border-radius: .1875rem;
        color: var(--w-color-text-context);
        cursor: pointer;
        display: inline-block;
        flex-shrink: 0;
        height: 1.5rem;
        margin-inline-end: .625rem;
        position: relative;
        vertical-align: bottom;
        width: 1.5rem;
    }

    input[type=checkbox]:before {
        content: "";
        height: 1rem;
        inset-inline-start: .1875rem;
        position: absolute;
        top: .1875rem;
        width: 1rem;
    }
    input[type=checkbox]:checked:before {
        color: #007d7e;
    }

    .form-check .form-check-input{
        background-color: var(--w-color-surface-page) !important;
        &:checked{
            border-color: var(--w-color-icon-primary) !important;
        }
        &:focus{
            box-shadow: 0 0 0 0.25rem rgba(1,125,126,.25) !important;
            border-color: rgba(1,125,126, .8) !important;
        }
        &[type="radio"]{
            &:checked{
                background-color: var(--w-color-icon-primary) !important;
            }
        }
    }

    .badge{
        &.badge-success{
            background: var(--w-color-icon-primary);
        }
        &.badge-secondary{
            background: #dfdfdf;
            color: #212529;
        }
    }

    .upload-image{
        .sortable-handle{
            input[type="checkbox"]{
                margin-top: 12px;
                width: calc(2em + 2px) !important;
                height: calc(2em + 2px) !important;
            }
        }
    }

    // Tables styling
    table.listing{
        table-layout: fixed;
    }
    .btn-toolbar.dropdown{
            position: relative;
            & > button{
                height: unset;
                width: auto;
                margin-right: auto;
                display: block;
                position: unset !important;
                float: unset !important;
            }
            &.open{
                .dropdown-menu{
                    display: block;
                }
            }
            .dropdown-menu{
                background-color: var(--w-color-surface-menus);
                top: 100%;
                right: 0;
                a.dropdown-item:active{
                    background-color: #559c9d;
                }
            }
    }

    // Color switch and button styling

    .btn.btn-primary, .btn.btn-success{
        background-color: var(--w-color-surface-menus);
        border-color: var(--w-color-surface-menus);
        &:hover{
            background-color: #00676a;
            border-color: #00676a;
        }
        &:not(:disabled):not(.disabled):active{
            background-color: #00676a;
            border-color: #00676a;
            box-shadow: 0 0 0 0.2rem rgba(3,102,106,0.5);
        }
        &:focus{
            background-color: var(--w-color-surface-menus);
            border-color: var(--w-color-surface-menus);
            box-shadow: 0 0 0 0.2rem rgba(3,102,106,0.5);
        }
    }
    .btn{
        padding: .5rem 1rem !important;
        font-size: .9rem;
        font-weight: 600;
        i{
            margin-right: .5rem;
        }
    }

    // General replacement

    button{
        i{
            margin-right: .25rem;
        }
    }

    a {
        color: var(--w-color-text-label);
        text-decoration: none;
    }

    .content{
        .page-content{
            div.table-header{
                display: flex;
                width: 100%;
                align-items: center;
                justify-content: space-between;
            }
        }
    }

    .page-content {
         > .table-header {
            border: none;
            background: none;
        }   
        > .content-block {
            border: none;
            background-color: var(--w-color-surface-page);

            aside.order-graph-details {
                label {
                    background-color: var(--w-color-surface-menus);
                    color: var(--w-color-text-label-menus-default);
                    display: block;
                    width: 100%;
                }
            }
        }
        .listing {
            caption.table-headers {
                border: none;
                background: none;
                color: #777777;
            }
            
        }
    }
    .page-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex-direction: row-reverse;
        h1{
            margin-right: auto;
            margin-bottom: 0;
        }
        .btn.btn-primary{
            background: #03666a;
        }
    }
    #product_stock .listing tr td:last-child label,
    .product-attributes .listing tr .form-check label{
        display: none;
    }
    .form-check{
        display: flex;
        align-items: center;
        padding-left: 0;
        label{
            padding-left: .5rem;
            &.mt-2{
                margin: 0 !important;
            }
        }
    }
    .input-group.date{
        display: flex;
        input{
            max-width: 150px;
        }
    }
    .datepicker{
        td, th{
            cursor: pointer;
            border: 0;
            text-align: center;
        }
        td{
            &.active, span.active{
                background-color: #0a7d7e;
            }
            &.today:before{
                border-bottom-color: #0a7d7e
            }
        }
        th{
            padding: 5px;
        }
    }
    .bootstrap-datetimepicker-widget{
        padding: 0;
        margin: 0;
    }
    .fixed-actions .fixed-actions-group{
        position: unset;
        background: transparent;
        padding: 0;
        bottom: unset;
        margin-top: 1rem;
        .form-group{
            display: flex;
            flex-direction: row-reverse;
            .float-right{
                margin-left: auto;
                justify-content: space-between;
            }
        }
    }
    .form-actions{
        a, button, input{
            &:nth-child(1){
                margin-right: 10px;
            }
            &:nth-child(2){
                margin-left: 10px;
            }
        }
        input{
            display: inline-block;
            width: auto;
        }
    }
    .pagination{
        &.justify-content-center{
            justify-content: space-between !important;
        }
        .page-link{
            border: 0;
            color: #0a7d7e;
            background: transparent !important;
            box-shadow: unset;
            font-weight: 500;
        }
    }
    .dropdown{
        position: relative;
        button{
            position: relative;
            float: unset;
        }
        &.open{
            .dropdown-menu{
                display: block;
            }
        }
        .dropdown-menu{
            float: unset;
            top: 100%;
            left: unset;
            right: 0;
        }
    }
    .float-right{
        .dropdown .dropdown-menu{
            left: unset;
            right: 0;
        }
    }
    .float-left{
        .dropdown .dropdown-menu{
            right: unset;
            left: 0;
        }
    }
    .modal{
        overflow-x: hidden;
        overflow-y: auto;
        &.in{
            opacity: 1;
        }
        .modal-dialog{
            padding: 0;
            margin: 1.75rem auto;
            max-width: 830px;
            height: auto;
        }
        .close{
            --webkit-appearance: unset;
            appearance: unset;
            background: white;
            border: 0;
            width: auto;
            height: auto;
            font-size: 2rem;
            padding: 0.25em;
        }
    }
    .fade{
        &.active, &.show{
            opacity: 1;
        }
    }
    // Dit is een beetje hacky en dat komt omdat het niet goed in de html staat
    .form-group ul.form-check-input{
        width: auto;
        height: auto;
        border: 0;
        padding-left: 1em;
        filter: unset !important;
        li{
            label input.form-check-input{
                cursor: pointer;
                width: .9em;
                height: .9em;
                margin-right: 1em;
                margin-top: 0 !important;
                &:before, &:after{
                    content: unset !important;
                }
            }
        }
    }
    .listing thead th{
        overflow: hidden;
        text-overflow: ellipsis;
    }
    &.breadcrumbs{
        margin-top: -2em;
        margin-bottom: 1em;
        padding: 0;
        .breadcrumb{
            padding: 0.2rem 0rem !important;
            background: var(--w-color-surface-menus);
            transform: translateY(5px);
            border-radius: 0;
            li{
                padding: 1em;
                &:before {
                    content: none;
                }
                &:hover{
                    a {
                        color: var(--w-color-text-label-menus-active);
                    }
                }
                &.active{
                    color: white;
                }
                a{
                    color: var(--w-color-text-label-menus-default);
                    padding-right: 1.5rem;
                    i{
                        color: white;
                    }
                }
            }
        }
    }
    .select2-container{
        width: 100% !important;
        max-width: 200px;
    }
}

header{    
  .oscar{
    padding-top: 0;
    margin-bottom: 1rem;
  }
  .row.wagtail-oscar {
      padding-top: 0;
  }
}

body > .select2-container {
    z-index: 1061;
}

// Oscar messages
.messages{
    .safe{
        p{
            a{
                padding: 0.375rem 0.75rem;
                font-size: .9rem;
                font-weight: 600;
                color: white;
                background-color: #007d7e;
                display: inline-block;
                font-weight: 400;
                line-height: 1.5;
                text-align: center;
                text-decoration: none;
                vertical-align: middle;
                cursor: pointer;
                user-select: none;
                border-radius: 0.25rem;
            }
        }
    }
}

// Footer in settings menu fix
.nav-submenu ul .footer{ position: unset !important; }

// Order status bubble colors
.orderstatus_bubble {
  width: 50px ;
  height: 50px ;
  border-radius: 10px ;
  display: flex ;
  position: relative;
}
.orderstatus_bubble > input {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 20px;
}
.orderstatus_bubble.paid {
  background-color: #fff3cd;
}
.orderstatus_bubble.complete {
  background-color: #d4edda;
}
.orderstatus_bubble.cancelled {
  background-color: #f8d7da;
}
.orderstatus_bubble.new {
  background-color: #00a9ff;
}
.orderstatus_bubble.pending-payment {
  background-color: #ff9d00;
}
.orderstatus_bubble.delayed-payment {
  background-color: #ce84ff;
}
.orderstatus_bubble.refund {
  background-color: #ff9859;
}

@import "menu";
@import "wagtailadmin";