@import '../utilities/variables';

body[data-theme='dark'] {
    background-color: $body--bg--dark;
    color: $body--color--dark;

    a,
    a:hover {
        color: $body--color--dark;
    }

    a.btn {
        color: $white;
    }

    .text-muted {
        color: $text--muted--dark;
    }

    .bg-list-muted {
        background-color: $list--bg-dark;
    }

    .controls {
        background-color: $body--bg--dark;
    }

    .navbar-mini {
        background-color: $body--bg--dark;
    }

    .navbar-mini button:hover {
        background-color: transparent;
    }

    .hover-bg {
        background-color: lighten($body--bg--dark, 10%);
    }

    .card {
        border: none !important;
        background-color: lighten($body--bg--dark, 5%);
    }

    .modal-content {
        background-color: $body--bg--dark;
    }

    .modal-footer {
        border-top: 1px solid $gray-700;
    }

    .border-top {
        border-top: 1px solid $gray-700 !important;
    }

    .border-bottom {
        border-bottom: 1px solid $gray-700 !important;
    }

    .border-left {
        border-left: 1px solid $gray-700 !important;
    }

    .dropdown-menu {
        background-color: $body--bg--dark;
        color: $body--color--dark;
        box-shadow: $box-shadow-lg;
        border: 1px solid $gray-700;

        & .dropdown-item:hover {
            color: $body--color--dark;
            background-color: lighten($body--bg--dark, 10%);
        }

        & .dropdown-divider {
            border-top: 1px solid $gray-700;
        }
    }

    textarea {
        color: $body--color--dark;
    }

    textarea::placeholder,
    textarea::-webkit-input-placeholder {
        color: $gray-600 !important;
    }

    .ql-editor {
        color: $body--color--dark;
    }

    div.ql-editor.ql-blank::before {
        color: $gray-600;
    }

    .btn-circle {
        border-color: $gray-700 !important;
    }

    .navbar-mini .btn {
        border-color: $gray-700 !important;
    }

    select.input {
        color: $gray-400;
    }

    .multiselect__content-wrapper {
        background-color: $body--bg--dark;
        border-color: rgba(67, 72, 87, 1);
    }

    .multiselect--above .multiselect__content-wrapper {
        border-top-color: rgba(67, 72, 87, 1);
    }

    .multiselect__content-wrapper ul li {
        color: $gray-400;
    }

    .multiselect__input,
    .multiselect__single {
        color: $gray-400;
    }

    .multiselect__input {
        background-color: transparent;
    }

    .multiselect__tags {
        border-radius: $border-radius;
        background-color: #71809630;
        border: none;
        padding-left: 0.75rem;
    }

    .multiselect__option--selected {
        color: $body--color--dark;
        background-color: #71809630;
    }

    .form-control:focus {
        background-color: #71809630 !important;
    }

    .bg-transparent:focus {
        background-color: transparent !important;
    }

    .filepond--panel-root {
        background-color: #71809630 !important;
    }

    .filepond--drop-label {
        color: $body--color--dark !important;
    }

    .filepond--drop-label svg path {
        fill: $body--color--dark;
    }

    .form-control,
    .input-group-text,
    .custom-select {
        color: $body--color--dark;
        background-color: #71809630 !important;
    }

    .sidebar-controls.active {
        background-color: $body--bg--dark;
    }

    .fill-bg {
        fill: $body--bg--dark;
    }

    .fill-body-color {
        fill: $body--color--dark;
    }

    .fill-muted {
        fill: $text--muted--dark;
    }
}