// Các class hay dùng
// Học tư tưởng, tham khảo: https://tailwindcss.com/
@import "utils/animated-underline";
@import "utils/background";
@import "utils/border";
@import "utils/btn-ripple";
@import "utils/colors";
@import "utils/cursor";
@import "utils/custom-control";
@import "utils/custom-scrollbar";
@import "utils/dropdown";
@import "utils/embed";
@import "utils/filter";
@import "utils/flex";
@import "utils/font-sizes";
@import "utils/font-weights";
@import "utils/form";
@import "utils/grid";
@import "utils/line-clamp";
@import "utils/line-height";
@import "utils/object-fit";
@import "utils/opacity";
@import "utils/overflow";
@import "utils/position";
@import "utils/reflection";
@import "utils/required";
@import "utils/shadow";
@import "utils/sizing";
@import "utils/table";
@import "utils/text";
@import "utils/zindex";


@import "elements/material-switch";
@import 'elements/rating-star';
@import "webkit-autofill";

// Bỏ border ở trên modal
.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

// Bỏ border ở form-control, sử dụng background để phân biệt
.form-control,
.form-select,
.input-group-text {
    border: none;
}

// Bỏ border ở phân trang (không nên)
/*
.page-link {
    border: none;
}

.page-item .page-link {
    border-radius: 0.25rem;
}
*/

// @import "dark-theme";
@import "light-theme";


// Vue framework
[v-cloak] {
    display: none
}


// Bỏ đường viền khi focus, active
*,
*:focus,
*:active {
    outline: none;
    // box-shadow: none;
}


// Header của một vùng panel
// Không nổi bật table header, modal header
th,
.modal-title,
.panel-header {
    font-weight: 500;
    font-size: 1rem;
}


// Cho thanh bên trái cho đẹp và nổi bật
// Không cho thanh dưới vì ảnh hưởng đến margin-bottom
/*
.modal-title,
.panel-header {
    border-left: 0.25rem solid $warning;
    padding-left: 0.75rem;
}
*/


label {
    color: $text-muted;
}


code {
    color: $warning;
    font-size: 1rem; // Bootstrap đang nhỏ hơn, cho lại về bình thường
}


.image-box-shadow {
    box-shadow: inset 0 0 0 1px hsla(0, 0%, 0%, 0.1);
}


// Cho ảnh ở trên của rounded card
// Bootstrap đã có sẵn?
.rounded-up {
    border-radius: 0.25rem 0.25rem 0 0;
}

.rounded-down {
    border-radius: 0 0 0.25rem 0.25rem;
}


// Hiển thị các dấu $ ở phía trước câu lệnh
// Các ký tự này sẽ không bị copy
.command-line {
    &::before {
        content: "$ ";
        font-size: 0.75rem;
    }
}


// Ở Bootstrap 5, các thẻ a mặc định là có underline, phải thêm text-decoration-none nếu muốn ẩn đi
// Chuyển lại mặc định là không có underline
a {
    text-decoration: none;
}


// Bootstrap 5 bỏ text-justify, mình vẫn dùng nhiều
.text-justify {
    text-align: justify;
}


// Style nghiêng
.skew-wrapper {
    transform: skew(-30deg) translateX(20px);;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.unskew {
    transform: skew(30deg);
    display: inline-block;
}


// Bỏ margin này đi
.modal-footer > * {
    margin: unset;
}


// Thư viện daterangepicker
// TODO: Tách file riêng, summernote
.daterangepicker .ranges li.active {
    background-color: $primary !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: $primary !important;
}

// Đang bị màu đen, chuyển thành trắng
.btn-primary,
.btn-primary:hover,
.btn-outline-primary:hover {
    color: #fff;
}

textarea {
    min-height: 150px !important;
}

// Các icon hành động ở bảng
// Nên để cùng màu hết
.table-action-icon {
    color: $primary !important;
}