// app global css in SCSS form
@import './icons.scss';
@import '@quasar/quasar-ui-qcalendar/src/QCalendarMonth.sass';

body.body--light {
    --font-color: black;
    --vn-header-color: #cecece;
    --vn-page-color: #ffffff;
    --vn-section-color: #e0e0e0;
    --vn-section-hover-color: #b9b9b9;
    --vn-text-color: var(--font-color);
    --vn-label-color: #5f5f5f;
    --vn-accent-color: #e7e3e3;

    background-color: var(--vn-page-color);

    .q-header .q-toolbar {
        color: var(--font-color);
    }
}
body.body--dark {
    --vn-header-color: #5d5d5d;
    --vn-page-color: #222;
    --vn-section-color: #3d3d3d;
    --vn-section-hover-color: #747474;
    --vn-text-color: white;
    --vn-label-color: #a8a8a8;
    --vn-accent-color: #424242;

    background-color: var(--vn-page-color);
}

a {
    text-decoration: none;
}

.link {
    color: $color-link;
    cursor: pointer;
}

.tx-color-link {
    color: $color-link !important;
}
.tx-color-font {
    color: $color-link !important;
}

.header-link {
    color: $color-link !important;
    cursor: pointer;
    border-bottom: solid $primary;
    border-width: 2px;
    width: 100%;
    .q-icon {
        float: right;
    }
    text-transform: uppercase;
}

.link:hover {
    text-decoration: underline;
}

// Removes chrome autofill background
input:-webkit-autofill,
select:-webkit-autofill {
    color: var(--vn-text-color);
    font-family: $typography-font-family;
    -webkit-text-fill-color: var(--vn-text-color);
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

.bg-vn-section-color {
    background-color: var(--vn-section-color);
}

.bg-vn-hover {
    background-color: var(--vn-section-hover-color);
}

.color-vn-label {
    color: var(--vn-label-color);
}

.color-vn-text {
    color: var(--vn-text-color);
}

.color-vn-white {
    color: $white;
}

.card-width {
    max-width: 800px;
    width: 100%;
}

.vn-card {
    background-color: var(--vn-section-color);
    color: var(--vn-text-color);
    border-radius: 8px;
}

.card-width {
    width: 770px;
}

.vn-card-list {
    width: 100%;
    max-width: 60em;
}

.bg-vn-primary-row {
    background-color: var(--vn-section-color);
}

.bg-vn-secondary-row {
    background-color: var(--vn-accent-color);
}

.text-primary-light {
    color: $primary-light !important;
}
.bg-primary-light {
    background: $primary-light !important;
}

.fill-icon {
    font-variation-settings: 'FILL' 1;
}

.fill-icon-on-hover:hover {
    font-variation-settings: 'FILL' 1;
    cursor: pointer;
}

.vn-table-separation-row {
    height: 16px !important;
    background-color: var(--vn-section-color) !important;
}

/* Estilo para el asterisco en campos requeridos */
.q-field.required .q-field__label:after {
    content: ' *';
}

.q-card,
.q-table,
.q-table__bottom,
.q-drawer {
    background-color: var(--vn-section-color);
}

.tr-header {
    color: var(--vn-label-color);
}

.disabled {
    & .q-checkbox__label {
        color: var(--vn-text-color);
    }
    & .q-checkbox__inner {
        color: var(--vn-label-color);
    }
}

.q-chip,
.q-notification__message,
.q-notification__icon {
    color: black;
}
.q-notification--standard.bg-negative {
    background-color: #fa3939 !important;
}
.q-notification--standard.bg-positive {
    background-color: #a3d131 !important;
}

.q-tooltip {
    background-color: var(--vn-page-color);
    color: var(--font-color);
    font-size: medium;
}

.q-card__actions {
    justify-content: center;
}

.q-card,
.q-table,
.q-table__bottom,
.q-drawer {
    background-color: var(--vn-section-color);
}

input[type='number'] {
    -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.q-scrollarea__content {
    max-width: 100%;
}

/* ===== Scrollbar CSS ===== /
/ Firefox */

* {
    scrollbar-width: auto;
    scrollbar-color: var(--vn-label-color) transparent;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--vn-label-color);
    border-radius: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

.q-table {
    th,
    td {
        padding: 1px 10px 1px 10px;
        max-width: 100px;
        div span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .shrink {
        max-width: 75px;
    }
    .expand {
        max-width: 400px;
    }
}