// 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;
}

[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;
    }
    .table {
        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.b-table > tbody > .table-active, .table.b-table > tbody > .table-active > th, .table.b-table > tbody > .table-active > td {
        // Table selected cells
        background: darken($bg-dark, 10%);

    }

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

    .custom-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
    }
}




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;
}