/** Global style **/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

/** Common class **/
.disabled {
    opacity: 0.55 !important;
    pointer-events: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.readonly {
    pointer-events: none !important;
}

.smaller {
    font-size: 0.75rem;
}

.overflow-y-visible {
    overflow-y: visible !important;
}

.drag-handle {
    cursor: grab;
}

.dragging-item {
    opacity: 0.5;
    background: #faf8f4;
}

@media (min-width: 600px) {
    .text-right-sm {
        text-align: right !important;
    }
}

/** Custom class **/
:root {
    --default-icon-color: #000;
    --v-expand-panel-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
    --v-card-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
}

:root .v-theme--dark {
    --default-icon-color: #fff;
    --v-expand-panel-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
    --v-card-title-bg: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
}

.pin-codes-input {
    --ebk-pin-code-input-height: 56px;
    --ebk-pin-code-input-gap: 12px;
    --ebk-pin-code-transition-duration: 0ms;
}

@media (min-width: 1280px) {
    .pin-codes-input {
        --ebk-pin-code-input-gap: 20px;
    }
}

.pin-code-input input {
    font-size: 1.25rem;
}

.expand-panel-title-with-bg {
    background-color: var(--v-expand-panel-title-bg);
}

.card-title-with-bg > .v-card-item {
    background-color: var(--v-card-title-bg);
}

.auth-logo {
    position: absolute;
    z-index: 1;
    inset-block-start: 2rem;
    inset-inline-start: 2.3rem;
}

.auth-logo img {
    width: 2em;
    height: 2em;
}

.auth-wrapper {
    min-block-size: calc(var(--vh, 1vh) * 100);
}

.auth-card {
    background-color: rgb(var(--v-theme-surface));
}

@media (max-width: 959px) and (max-height: 669px) {
    .auth-card {
        padding-top: 64px !important;
    }
}

.auth-img-footer {
    position: absolute;
    inset-block-end: 0;
    min-inline-size: 100%;
}

.title-and-toolbar {
    min-height: 38px;
    flex-wrap: wrap;
    row-gap: 1rem;
}

.text-field-append-text {
    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}

.chart-pointer {
    display: inline-block;
    margin-right: 5px;
    border-radius: 10px;
    width: 10px;
    height: 10px;
}

/** Common class for replacing the default style of vuetify **/
.v-input.v-input--readonly input,
.v-input.v-input--readonly textarea,
.v-input.v-input--readonly .v-field .v-text-field__prefix,
.v-input.v-input--readonly .v-field .v-text-field__suffix,
.v-input.v-input--readonly .v-field .v-field__input,
.v-input.v-input--readonly .v-field.v-field,
.v-input.v-input--readonly .cursor-pointer {
    cursor: default !important;
}

.always-cursor-pointer,
.always-cursor-pointer.v-input.v-input--readonly input,
.always-cursor-pointer.v-input.v-input--readonly textarea,
.always-cursor-pointer.v-input.v-input--readonly .v-field .v-text-field__prefix,
.always-cursor-pointer.v-input.v-input--readonly .v-field .v-text-field__suffix,
.always-cursor-pointer.v-input.v-input--readonly .v-field .v-field__input,
.always-cursor-pointer.v-input.v-input--readonly .v-field.v-field,
.always-cursor-pointer.v-input.v-input--readonly .cursor-pointer {
    cursor: pointer !important;
}

.v-table {
    th {
        background: rgb(var(--v-table-header-background)) !important;
    }

    tr.even-row {
        background: #fcfcfc;
    }

    tbody.has-bottom-border > tr:last-child > td {
        border-bottom: thin solid rgba(var(--v-border-color), var(--v-border-opacity));
    }
}

.v-table.v-table--hover {
    tbody > tr.no-hover:hover td {
        background: inherit !important;
    }
}

.v-table.table-striped {
    tr:nth-child(even) {
        background: #fcfcfc;
    }
}

.v-theme--dark {
    .v-table {
        tr.even-row {
            background: #161616;
        }
    }
}

.v-theme--dark {
    .v-table.table-striped {
        tr:nth-child(even) {
            background: #161616;
        }
    }
}

.v-chip.v-chip--size-x-small {
    font-size: 0.75rem;
}

.right-bottom-icon .v-badge__badge {
    padding: 0;
    min-width: 16px;
    height: 1rem;
}

.v-btn-toggle {
    .v-btn {
        .right-bottom-icon {
            .v-icon {
                color: inherit;
                font-size: 0.8125rem;
            }
        }
    }
}

.w-100-window-container.v-window > .v-window__container {
    width: 100%;
}

.tab-text-truncate.v-tab > .v-btn__content {
    overflow-x: hidden;
}

.skeleton-no-margin .v-skeleton-loader__text {
    margin: 0;
}

/** Common class for replacing the default style of Materio **/
.v-application,
.text-body-1,
.text-body-2,
.text-subtitle-1,
.text-subtitle-2 {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}

.text-caption {
    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}

.v-label {
    &:not(.v-field-label--floating) {
        color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
    }
}

.v-card-subtitle,
.v-list-item-subtitle {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}

.v-table {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}

.v-text-field {
    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));

    .v-label {
        color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
    }

    .v-select__selection {
        .v-label {
            color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
        }
    }
}

.text-field-with-colored-label.v-text-field.text-primary .v-field-label.v-label {
    color: rgba(var(--v-theme-primary), var(--v-medium-emphasis-opacity)) !important;
}

.text-field-with-colored-label.v-text-field.text-expense .v-field-label.v-label {
    color: rgba(var(--v-theme-expense), var(--v-medium-emphasis-opacity)) !important;
}

.text-field-with-colored-label.v-text-field.text-income .v-field-label.v-label {
    color: rgba(var(--v-theme-income), var(--v-medium-emphasis-opacity)) !important;
}

.v-switch.v-switch--inset {
    .v-switch__track {
        min-width: 1.875rem !important;
    }
}

body .v-tabs:not(.v-tabs-pill) {
    &.v-tabs--vertical {
        border-right: inherit;

        .v-tab__slider {
            inset-inline-end: unset;
            inset-inline-start: 0;
        }
    }

    .v-tab {
        &.v-tab--selected {
            &.v-btn.v-btn--variant-text {
                &:hover, &:active, &:focus {
                    .v-btn__overlay {
                        --v-hover-opacity: 0.04;
                    }
                }
            }
        }

        &:not(.v-tab--selected) {
            &.v-btn.v-btn--variant-text {
                &:hover, &:active, &:focus {
                    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));

                    .v-btn__overlay {
                        --v-hover-opacity: 0.04;
                    }
                }
            }
        }
    }
}

body .v-btn-group {
    &.v-btn-group--density-comfortable {
        height: 38px;
    }

    &.v-btn-group--divided .v-btn:not(:last-child) {
        border-inline-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
    }
}

.v-btn {
    text-transform: none;
}

/** Replacing the default style of @vuepic/vue-datepicker **/
.dp__theme_light {
    --dp-primary-color: #c67e48;
}

.dp__theme_dark {
    --dp-primary-color: #c67e48;
}

/** Fix @vuepic/vue-datepicker style issue **/
.dp__main.dp__flex_display {
    flex-direction: column;
}

.dp__main .dp--tp-wrap {
    max-width: 100%;
}

.dp__main .dp__menu_inner {
    padding-top: 0;
    padding-bottom: 0;
}

.dp__main .dp__calendar .dp__calendar_item {
    flex: 1;
}

.dp__main .dp__calendar .dp__calendar_item > .dp__cell_inner {
    width: 100%;
}
