@import "../../../xframework/assets/styles/_colors";

@mixin basic-styles() {
    //*:not(.flatpickr-day),
    // *:not(.fc-timegrid-now-indicator-arrow),
    // *:not(.fc-timegrid-now-indicator-line) {
    :not(.flatpickr-calendar *, .error) {
        @include border-color;
    }

    body #layout > #layout-menu .special-buttons {
        &, a {
            background-color: transparent !important;
        }
    }

    .popupmenu .listing li.selected,
    .popupmenu .listing li>a:not(.disabled):hover,
    .popover .menu li a:not(.disabled):hover,
    {
        @include background-highlight-color(5, true);
        @include text-color(true);
    }

    html.dark-mode {
        .messagelist tr:not(.flagged):not(.deleted).selected td.subject {
            a,
            span.msgicon.status {
                color: #fff;
            }
        }
    }

    #layout #xsidebar {
        border: none;
    }
}

@mixin secondary-button-styles() {
    div.tox .tox-button.tox-button--secondary, // html editor
    .mce-window .mce-foot .mce-btn,
    .btn.btn-secondary:not(.btn.btn-danger):not(.xanchor),
    .btn.btn-link {
        @include background-highlight-color(8);
        border: 1px solid;
        @include text-color(true);
        @include border-strong-color(true);

        &:hover {
            @include background-highlight-color(12, true);
        }

        &.ui-dialog-titlebar-close {
            border: none !important;
        }
    }

    .mce-window .mce-foot .mce-btn button {
        @include text-color(true);
    }
}

@mixin primary-button-colors($background, $backgroundHighlight) {
    .btn.btn-primary,
    .btn.btn-success,
    div.tox .tox-dialog__footer .tox-button, // html editor
    .mce-window .mce-foot .mce-btn.mce-primary,
    .floating-action-buttons a.button {
        background-color: $background !important;
        border: 1px solid $background !important;
        color: #fff;

        &:hover {
            background-color: $backgroundHighlight !important;
        }
    }

    .btn.disabled,
    .btn:disabled {
        &, &:hover {
            //border: 1px solid #777 !important;
            //background-color: #777 !important;
        }
    }

    .mce-window .mce-foot .mce-btn.mce-primary button {
        color: #fff !important;
    }
}

@mixin switchbox-colors($normalColor, $highlightColor) {
    .custom-switch .custom-control-input:checked ~ .custom-control-label {
        &:before {
            background-color: $normalColor !important;
            border: 1px solid $normalColor !important;
        }

        &:hover:before {
            background-color: $highlightColor !important;
            border: 1px solid $highlightColor !important;
        }
    }

    .mce-window .mce-checkbox i.mce-i-checkbox {
        color: #c0c0c0;
    }

    .mce-window .mce-checkbox.mce-checked i.mce-i-checkbox {
        color: $normalColor !important;
    }
}

@mixin input-colors($borderColor) {
    .custom-file-label:focus:not(.is-invalid),
    .form-control:focus:not(.is-invalid),
    .recipient-input.focus,
    .mce-tinymce.focused,
    div.tox.focused {
        border-color: $borderColor !important;
    }
}

@mixin anchor-colors($normalColor, $darkModeColor) {
    a,
    button.xanchor,
    div.tox .tox-dialog .tox-dialog__body-nav-item--active,
    input.icon-checkbox + label:before,
    input.icon-checkbox:checked + label:before {
        color: $normalColor;

        html.dark-mode & {
            color: $darkModeColor;
        }
    }
}

@mixin listing-colors($background: false, $dmBackground: false, $text: false,  $dmText: false) {
    #settings-menu li.selected,
    .listing tr.selected td,
    .listing li.selected > a,
    ul.treelist li.selected > div > a,
    ul.treelist li.selected > a,
    .toolbarmenu.listing li:hover a.active {
        @if $background {
            background-color: $background;
        }

        @if $text {
            color: $text;
        } @else {
            @include text-color;
        }

        html.dark-mode & {
            @if $dmBackground {
                background-color: $dmBackground;
            }

            @if $dmText {
                color: $dmText;
            } @else {
                @include text-color;
            }
        }
    }
}

@mixin unread-count-colors($background, $dmBackground: false, $text: false, $dmText: false) {
    .folderlist li.mailbox .unreadcount {
        @if $background {
            background-color: $background !important;
        }

        @if $text {
            color: $text;
        } @else {
            @include text-color;
        }

        html.dark-mode & {
            @if $dmBackground {
                background-color: $dmBackground !important;
            }

            @if $dmText {
                color: $dmText;
            } @else {
                @include text-color;
            }
        }
    }
}

@mixin logo-background-color($background: false, $dmBackground: false) {
    #layout-menu .popover-header {
        @if $background {
            background-color: $background !important;
        }

        html.dark-mode & {
            @if $dmBackground {
                background-color: $dmBackground !important;
            }
        }
    }
}

@mixin datepicker-colors($background: false, $dmBackground: false) {
    .ui-datepicker {
        a.ui-state-active {
            @if $background {
                background-color: $background !important;
            }

            html.dark-mode & {
                @if $dmBackground {
                    background-color: $dmBackground !important;
                }
            }
        }
    }
}

