// global main style

.logo-svg {
    background-color: #000000;
}

.text-profit {
    color: $color-profit;
}

.text-loss {
    color: $color-loss;
}

.v-select * {
    font-size: 0.8rem;
}

.modal.show {
    // TODO: modal bootstrap fix (???)
    display: block;
}

.btn-primary {
    color: #ffffff
}

.text-bg-primary {
    color: #ffffff !important;
}

[data-theme="dark"] {
    $bg-dark: rgb(18, 18, 18);

    $bg-darker: darken($bg-dark, 5%);
    $fg-color: #dedede;

    background-color: darken($bg-dark, 5%);
    color: $fg-color !important;

    body {
        background: $bg-darker;
        color: $fg-color;
    }

    .card {
        border-color: lighten($bg-dark, 10%);
        background-color: $bg-dark;

    }

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

    .card-header {
        background: lighten($bg-dark, 5%);
        color: $fg-color;
    }

    .list-group-item {
        color: $fg-color;
        background: $bg-dark;
    }

    // .custom-select {
    //     color: $fg-color;
    //     // background: $bg-dark;
    // }
    .nav-tabs {
        border-bottom: 1px solid lighten($bg-dark, 20%);

        .nav-link {
            color: $primary;

            &:hover {
                border-color: lighten($bg-dark, 5%);
                color: lighten($primary, 10%);
            }
        }
    }

    .nav-link.active {
        color: $fg-color;
        background: $bg-darker;
        border-color: lighten($bg-dark, 20%);
    }

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

    .form-control {
        color: $fg-color;
        background: $bg-dark;
    }

    .popover {
        background: $bg-dark;
        border-color: lighten($bg-dark, 20%);
    }

    .popover-header {
        background: $bg-darker;
    }

    .popover-body {
        color: $fg-color;
    }

    .logo-svg {
        background-color: $fg-color;
    }

    textarea {
        color: $fg-color;
        background: $bg-dark;
    }

    .text-dark {
        color: $fg-color !important;
    }

    .dropdown-menu {
        background-color: lighten($bg-dark, 5%);
        color: $fg-color;
    }

    .dropdown-item {
        color: $fg-color;
    }

    // Styles for searchable select
    .vs__dropdown-toggle {
        border-color: lighten($bg-dark, 20%);
        // border: 1px solid $fg-color;
    }

    .style-chooser .vs__search::placeholder,
    .style-chooser .vs__dropdown-toggle,
    .style-chooser .vs__dropdown-menu,
    .vs__dropdown-menu {
        background-color: lighten($bg-dark, 5%);
        color: $fg-color;
    }

    .vs__search,
    .vs__dropdown-option {
        color: $fg-color;
    }

    .vs__open-indicator {
        fill: darken($fg-color, 10%);
    }

    .vs__selected {
        color: $fg-color;
    }

    hr {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .table {
        color: $fg-color;
    }

    .table.b-table>tbody>.selected,
    .table.b-table>tbody>.selected>th,
    .table.b-table>tbody>.selected>td {
        // Table selected cells
        color: $fg-color;
        background: darken($bg-dark, 10%);
    }


    .table-hover tbody tr:hover td,
    .table-hover tbody tr:hover th,
    .table.b-table>tbody>.selected:hover,
    .table.b-table.table-hover>tbody>tr.selected th:hover {
        // Table selected cells hover
        color: $fg-color;
        background: lighten($bg-dark, 10%);
        --bs-table-hover-bg: #272727;
    }

    .form-select {
        color: $fg-color;
        border-color: lighten($bg-dark, 20%);
        background: $bg-dark url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23dedede' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px
    }

    .b-toast .toast {
        background: $bg-dark;
        border-color: lighten($bg-dark, 20%);
    }

    .toast-header {
        color: $fg-color;
        background: darken($bg-dark, 10%);
        border-color: lighten($bg-dark, 20%);
    }

    .vue-grid-item>.vue-resizable-handle {
        // Stupid workaround to have the Shevron actually show.
        background-color: darken($fg-color, 50%);
    }
}

.vue-grid-item {
    // Fix white corners in vue-grid-item.
    background-color: unset !important;
}

html.ft-theme-transition,
html.ft-theme-transition *,
html.ft-theme-transition *:before,
html.ft-theme-transition *:after {
    transition: background 750ms ease-in-out,
        border-color 750ms ease-in-out;
    transition-delay: 0 !important;
}