/* Set global styles common for any type of theme */
@media (max-width: 991px) {
    .hide-below-992px {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .hide-above-992px {
        display: none !important;
    }
}

.border-1px-solid {
    border: 1px solid var(--surface-border);
}

/* Custom color classes */
.disabled-row {
    background: var(--surface-200) !important;
    color: var(--text-color-secondary) !important;
}

.confirm-toast-color {
    color: var(--confirm-toast-color) !important;
}

.confirm-toast-detail-color {
    color: var(--confirm-toast-detail-color) !important;
}

.error-toast-color {
    color: var(--error-toast-color) !important;
}

.error-toast-detail-color {
    color: var(--error-toast-detail-color) !important;
}

.onboarding-active-color {
    color: var(--onboarding-active-color) !important;
}

.form-error {
    color: var(--form-error-color) !important;
    font-size: 0.875rem;
}

.mail-href-link-color {
    color: var(--mail-href-link-color) !important;
}

.today-background-color {
    background: var(--today-background-color) !important;
}
/* END */

/* 'flex flex-column gap-2 w-15rem' */
.form-input-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 15rem;
}

/* 'flex flex-row gap-3' */
.form-input-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

/* Should be used when in i18n files we break new lines in texts with `\n` */
.new-line {
    white-space: pre-wrap;
}

/* Measurements tag class colors */
.measurements-tag {
    background: #dab6fc;
    color: #5c2f88;
}

/* Measurements tag class colors */
.notes-tag {
    background: #94e0ed;
    color: #036475;
}

/* Mobile Add Fixed button - size and position */
.mobile-add-button-size {
    width: 56px;
    height: 56px;
}

.mobile-add-button-position {
    bottom: calc(var(--mobile-nav-bar-height) + var(--mobile-add-button-position-offset)) !important;
    right: var(--mobile-add-button-position-offset) !important;
}

/* Additional widths */
@media screen and (min-width: 768px) {
    .md\:w-35rem {
        width: 35rem !important;
    }
}

@media screen and (min-width: 768px) {
    .md\:w-45rem {
        width: 45rem !important;
    }
}

/* Global transitions */
/* use: <Transition name="scale-in-out"> </Transition>*/
.scale-in-out-enter-active {
    animation: scale-in 0.3s;
}
.scale-in-out-leave-active {
    animation: scale-in 0.3s reverse;
}
@keyframes scale-in {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

/* use: <Transition name="scale-y-in-out"> </Transition>*/
.scale-y-in-out-enter-active {
    animation: scale-y 0.3s;
}
.scale-y-in-out-leave-active {
    animation: scale-y 0.3s reverse;
}
@keyframes scale-y {
    0% {
        transform: scaleY(0);
    }
    100% {
        transform: scaleY(1);
    }
}

/* use: <Transition name="scale-height"> </Transition>*/
.scale-height-enter-active {
    animation: scale-height 0.3s;
}
.scale-height-leave-active {
    animation: scale-height 0.3s reverse;
}
@keyframes scale-height {
    0% {
        max-height: 0px;
        opacity: 0;
    }
    100% {
        max-height: 100%;
        opacity: 1;
    }
}

/* use: <Transition name="fade"> </Transition>*/
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* Rotate mobile button if it has sub-menu */
.mobile-button-active {
    transition: 0.3s;
    transform: rotate(45deg);
}

.mobile-button-inactive {
    transition: 0.3s;
    transform: rotate(0deg);
}

/* Shake animation (left-right). Usage:
// define ref
const shakeElement = ref(false)

// use in some function to trigger animation
shakeElement.value = true
setTimeout(() => {
    shakeElement.value = false
}, 320)

// in html component use animation style
:class="{ 'shake-animation': shakeElement }"
*/
/* : `` */
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }
    25%,
    75% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
}

.shake-animation {
    animation: shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.word-break {
    word-break: break-word;
}

.list-wrapper-class {
    overflow: hidden;
    transition: max-height 300ms;
}

.min-h-25rem {
    min-height: 25rem;
}

.transition-duration-750 {
    transition-duration: 750ms;
}

@media screen and (min-width: 992px) {
    .lg\:min-w-22rem {
        min-width: 22rem !important;
    }
}

.list-wrapper-class {
    overflow: hidden;
    transition: max-height 300ms;
}