@font-face {
    font-family: 'Quicksand';
    src: url(/fonts/Quicksand.ttf) format('truetype');
}

html {
    font-size: 14px;
}

pre {
    white-space: pre-wrap;
}

.hx-inv-indicator {
    display: initial;
}
.hx-indicator {
    display: none;
}
.htmx-request .hx-inv-indicator {
    display: none;
}
.htmx-request .hx-indicator {
    display: initial;
}

ion-spinner{
    height: 1rem;
}

@media screen and (max-width: 768px) {
    ion-content::part(scroll)::-webkit-scrollbar {
        display: none;
    }

    ion-content::part(scroll) {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

ion-title{
    --color: var(--ion-color-text-primary);
}

ion-button{
    --border-radius: var(--ion-border-radius);
    font-size: 1rem;
}

ion-button.button-large{
    --padding-top: 1.375rem;
    --padding-bottom: 1.375rem;
}

.input-fill-outline {
  --border-radius: var(--ion-border-radius) !important;
}

ion-modal.modal-sheet{
    &::part(content){
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
}

ion-modal:not(.modal-sheet){
    --border-radius: 10px;
}

.loading-spinner{
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 999;

    ion-spinner{
        width: 72px;
        height: 72px;
        --color: var(--ion-color-primary)
    }
}

.htmx-request .loading-spinner {
    display: flex;
}
.htmx-request.loading-spinner {
    display: flex;
}

.jsonEdit {
    --jse-theme-color: var(--ion-color-warning);
    --jse-theme-color-highlight: var(--ion-color-warning-contrast);
    word-break: initial;
    white-space: initial;
}

.ion-color-text-primary {
    --ion-color-base: var(--ion-color-text-primary);
}

.ion-color-text-secondary {
    --ion-color-base: var(--ion-color-text-secondary);
}

.ion-use-color {
    color: var(--ion-color-base);
}
.ion-use-color-bg {
    background: var(--ion-color-base);
    color: var(--ion-color-contrast);
}
.stack-modal {
    --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4) !important;
    --backdrop-opacity: var(--ion-backdrop-opacity, 0.32) !important;
}

/* Custom ion colors */
.ion-color-available {
	--ion-color-base: var(--ion-color-available);
	--ion-color-base-rgb: var(--ion-color-available-rgb);
	--ion-color-contrast: var(--ion-color-available-contrast);
	--ion-color-contrast-rgb: var(--ion-color-available-contrast-rgb);
	--ion-color-shade: var(--ion-color-available-shade);
	--ion-color-tint: var(--ion-color-available-tint);
}

.ion-color-unavailable {
	--ion-color-base: var(--ion-color-unavailable);
	--ion-color-base-rgb: var(--ion-color-unavailable-rgb);
	--ion-color-contrast: var(--ion-color-unavailable-contrast);
	--ion-color-contrast-rgb: var(--ion-color-unavailable-contrast-rgb);
	--ion-color-shade: var(--ion-color-unavailable-shade);
	--ion-color-tint: var(--ion-color-unavailable-tint);
}

.ion-color-available-morning {
	--ion-color-base: var(--ion-color-available-morning);
	--ion-color-base-rgb: var(--ion-color-available-morning-rgb);
	--ion-color-contrast: var(--ion-color-available-morning-contrast);
	--ion-color-contrast-rgb: var(--ion-color-available-morning-contrast-rgb);
	--ion-color-shade: var(--ion-color-available-morning-shade);
	--ion-color-tint: var(--ion-color-available-morning-tint);
}

.ion-color-available-afternoon {
	--ion-color-base: var(--ion-color-available-afternoon);
	--ion-color-base-rgb: var(--ion-color-available-afternoon-rgb);
	--ion-color-contrast: var(--ion-color-available-afternoon-contrast);
	--ion-color-contrast-rgb: var(--ion-color-available-afternoon-contrast-rgb);
	--ion-color-shade: var(--ion-color-available-afternoon-shade);
	--ion-color-tint: var(--ion-color-available-afternoon-tint);
}

.ion-color-reserve {
	--ion-color-base: var(--ion-color-reserve);
	--ion-color-base-rgb: var(--ion-color-reserve-rgb);
	--ion-color-contrast: var(--ion-color-reserve-contrast);
	--ion-color-contrast-rgb: var(--ion-color-reserve-contrast-rgb);
	--ion-color-shade: var(--ion-color-reserve-shade);
	--ion-color-tint: var(--ion-color-reserve-tint);
}

.ion-color-pre-reserve {
	--ion-color-base: var(--ion-color-pre-reserve);
	--ion-color-base-rgb: var(--ion-color-pre-reserve-rgb);
	--ion-color-contrast: var(--ion-color-pre-reserve-contrast);
	--ion-color-contrast-rgb: var(--ion-color-pre-reserve-contrast-rgb);
	--ion-color-shade: var(--ion-color-pre-reserve-shade);
	--ion-color-tint: var(--ion-color-pre-reserve-tint);
}