@import "variables";

$box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
@function rgb($args...) {
    @return r#{g}#{b}(#{$args})
}


html.DARK {
    $default-font-color: #e6e6e6;
    scrollbar-color: #656565 #303030; // firefox scrollbar
    background-color: var(--bg-primary);
    background-image: url("/assets/images/bg/world.svg");
    background-repeat: no-repeat;
    //background-position: center 70px;
    background-position: center 0;
    background-size: 100%;

    body {
        //backdrop-filter: blur(10px);
        background-color: transparent; min-height: 100vh;
        min-width: calc(100vw - 19px);
    }

    $bg-text-dropdown: #464646;
    $shadow-lg: var(--mdc-dialog-container-elevation, 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12));

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #5a5a5a;
    }

    .modal-body, .modal-footer, .card {
        background-color: var(--bg-secondary);
    }

    .card { border: 1px solid #3d3d3d; }

    .modal-header, .card-header {
        background-color: var(--bg-primary--shade--three);
    }

    .dropdown-menu, .navbar {
        background-color: var(--dark-bg-primary);
        box-shadow: $box-shadow;
    }

    .dropdown-item.active, .dropdown-item:active {
        //background-color: var(--bg-tertiary--shade--two);
        background-color: var(--accent-error--shade--five);
        border: 1px solid var(--bg-tertiary);
    }

    .form-control {
        //background-color: var(--bg-tertiary);
        background-color: $bg-text-dropdown;
        border: 1px solid var(--bg-tertiary);
        color: #b0b0b0;
    }

    .form-control:focus {
        background-color: var(--bg-primary);
        border: 1px solid #710109;
    }

    .border,
    .border-left, .border-right, .border-top, .border-bottom {
        border-color: var(--bg-primary--shade--three) !important;
    }

    .footer {
        box-shadow: $box-shadow;
        color: var(-dark-content-primary--shade--three);
        background-color: var(--dark-bg-primary);
    }

    .shadow-sm { box-shadow: 0 0 3px #000 !important; }

    hr { border: 1px; border-top: 1px solid #616161; }
    .table-bordered th, .table-bordered td { border: 1px solid #727272b8; }

    .modal-content {
        box-shadow: 0 4px 8px 0 rgb(17 17 17), 0 6px 20px 0 rgb(33 33 33);
        border-color: #545454;
    }

    // Quill editor related style improvements.
    .ql-snow .ql-picker { color: var(--content-primary--shade--four); }
    .ql-container.ql-snow, .ql-toolbar.ql-snow { border: none; }
    .ql-toolbar.ql-snow { border-bottom: 1px solid #565656; }
    .ql-snow .ql-stroke { stroke: var(--content-primary--shade--four); }
    .ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
        fill: var(--content-primary--shade--four);
    }
    .ql-snow .ql-picker-options { background-color: var(--bg-primary); }
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options { border-color: #3c3c3c; }
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label { border-color: #464646; }

    // Quill editor table popup UI issue fix.
    .ql-table-menu { border: 1px solid #525252; background: #3a3a3a; }
    .ql-table-toggle { background: #2f2f2f; border: 2px solid #585858; }
    .ql-table-menu__item:hover { color: #f2f2f2; background-color: var(--accent-error--shade--five); }
    .ql-table-menu__item { padding: 5px 15px; }
    .ql-table-menu__item-icon { margin-right: 10px; svg { path { fill: #a2a2a2; }} }
    .ql-editor td { border: 1px solid #6f6f6f; padding: 5px 8px; }
    .ql-table-toggle { margin-left: -16px; }

    // Quill editor video modal popup bug fix.
    .ql-snow .ql-tooltip { margin-left: 159px; margin-top: -25px; background: #2f2f2f; border: 1px solid #585858; box-shadow: 0 0 5px #292929; color: #f2f2f2;
        input { background: #2f2f2f; border: 1px solid #585858; color: #f2f2f2; }
        input:focus-visible { outline: 1px solid #737373; }
    }
    .btn-primary { background-image: linear-gradient(#711010,#600000 60%,#4d1414); border: 1px solid #750303; }
    .btn-success { background-image: linear-gradient(#137110, #00600d 60%, #144d15); border: 1px solid #077503; }

    .dropdown-menu { background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); border: 1px solid rgba(187, 187, 187, 0.3); }
    .dropdown-item:hover, .dropdown-item:focus { color: #cecece; background-color: var(--accent-error--shade--five); }

    .shadow-lg { box-shadow: $shadow-lg; }
    div.dropdown-menu { box-shadow: $shadow-lg; }

    .p-dropdown:not(.p-disabled).p-focus,
    .form-control:focus {
        -webkit-box-shadow: 0 0 0 0.2rem rgba(143, 1, 1, 0.47);
        box-shadow: 0 0 0 0.2rem rgba(143, 1, 1, 0.47);
    }

    // primeng sorting related fields.
    .p-datatable .p-sortable-column.p-highlight { color: #b0b0b0; }
    .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { color: #b0b0b0; }
}