$primary: #005fc5;
$warning: #f59e0b;
$danger: #dc2626;
$body-bg: #f5f5f5;

$accordion-button-active-bg: rgba($primary, .05);
$accordion-button-focus-border-color: rgba($primary, .08);

@import "~bootstrap/scss/bootstrap";
@import "~tom-select/dist/css/tom-select.bootstrap5.css";
@import "flags";

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Verdana, sans-serif;
}

.fs-7 {
    font-size: .875rem;
}

.offcanvas-item {
    border-bottom: 1px rgba(#000, .1) solid;

    &:first-child {
        border-top: 1px rgba(#000, .1) solid;
    }

    &:hover {
        background: #fafafa;
    }

    >a {
        color: $secondary;
    }
}

.card-body {
    @at-root table {
        >thead {
            >tr {
                >th {
                    font-size: $font-size-sm * .875;
                    color: $secondary;
                    font-weight: 600;
                    text-transform: uppercase;
                }
            }
        }

        >tbody {
            >tr {
                >td {
                    vertical-align: middle;
                }
            }
        }
    }
}

.svg-icon {
    height: 20px;
    width: 20px;
    fill: currentColor;
}

// Remove order management accordion icons
#orderManager {
    --#{$prefix}accordion-btn-icon: none;
    --#{$prefix}accordion-btn-active-icon: none;
}

// TomSelect dropdown
.ts-input {
    color: inherit;
}

.ts-wrapper {
    &.form-select {
        background-color: inherit;
    }

    .ts-control {
        font-size: 14px;
        width: 100%;
        color: inherit;

        &.locale {
            width: 205px;
        }

        .dropdown-menu {
            width: 100%;
            height: auto;
        }
    }

    .ts-dropdown {
        font-size: 14px;

        .active {
            background-color: rgba($secondary, .06);
            color: inherit;
        }

        .selected {
            background-color: rgba($secondary, .1);
        }
    }
}

@media (max-width: 768px) {
    .ts-wrapper.js-language-selector {
        width: 180px
    }
}

.invoice-gateway {
    border: 1px $border-color solid;

    &:hover {
        border: 1px $primary solid;
    }
}

.email-list {
    border-radius: 0;

    .list-group-item {
        border: 0;
        border-bottom: 1px solid var(--bs-border-color);
        border-left: 2px solid transparent;

        &.active {
            border-left: 2px solid var(--bs-primary-border-subtle);
            background: rgba($primary, .1);
            color: $dark;
        }
    }
}

// TOOD: Add custom color themes to Huraga. Bootstrap has a great example here: https://getbootstrap.com/docs/5.3/customize/color-modes/#custom-color-modes
