/*----------------------------------
    TAILWIND CSS UTILITIES
----------------------------------*/
@tailwind base;
@tailwind components;
@tailwind utilities;

/*----------------------------------
    Root Variables
----------------------------------*/
:root {
    --bg-color: #000000;
    --bg-color-hover: #333333;
    --bg-active: #1a1a1a;
    --border-color: #4d4d4d;
    --text-color: #eee;
}

/*------Color Root Winmax4----------
    --bg-color: #ea580c;
    --bg-color-hover: #e7783c;
    --bg-active: #d14d09;
    --border-color: #e58046;
    --text-color: #eee;
*----------------------------------*/

/*----------------------------------
    Login Background
----------------------------------*/
.bg-login {
    @apply bg-[url('../public/assets/img/bg-login.png')] bg-cover bg-center;
}

/*----------------------------------
    Licenses
----------------------------------*/
.license {
    @apply rounded-full text-sm py-1 px-2 w-full mb-3 block text-color font-bold hover:-translate-y-0.5 transform transition;
}

.license-disabled {
    @apply bg-gray-300 rounded-full text-sm py-1 px-2 w-full mb-3 block text-gray-100 font-bold hover:-translate-y-0.5 transform transition pointer-events-none;
}

/*----------------------------------
    Welcome Content
----------------------------------*/
.all-content.blocked #sidebar,
.all-content.blocked .sidebar-toogle,
.all-content.blocked #main-calendar {
    @apply blur-sm;
}

/*----------------------------------
    Buttons
----------------------------------*/
button[disabled] {
    @apply pointer-events-none opacity-50 w-auto;
}

.btn-success {
    @apply
    w-fit h-8 sm:h-8 xl:h-8 inline-flex items-center
    px-3 py-1 justify-center bg-color hover:bg-color-hover
    text-color hover:-translate-y-0.5 transform transition
    tracking-wider border border-gray-200 font-semibold
    text-sm sm:text-xs xl:text-sm rounded-md shadow-sm;
}

.btn-block {
    @apply
    w-fit h-8 sm:h-8 xl:h-8 inline-flex items-center
    px-3 py-2.5 justify-center bg-red-600 hover:bg-red-700
    text-white hover:-translate-y-0.5 transform transition
    tracking-wider border border-gray-200 font-semibold
    text-base sm:text-xs xl:text-base rounded-md shadow-sm;
}

.btn-back {
    @apply
    w-fit h-[8] sm:h-8 xl:h-[8] inline-flex items-center
    px-3 py-2.5 justify-center bg-black hover:bg-gray-900
    text-color hover:-translate-y-0.5 transform transition
    tracking-wider border border-gray-200 font-semibold
    text-base sm:text-xs xl:text-base rounded-full shadow-sm;
}

.btn-cancel {
    @apply
    w-fit h-8 sm:h-8 xl:h-8 inline-flex items-center
    px-3 py-2.5 justify-center bg-gray-400 hover:bg-gray-500
    text-color hover:-translate-y-0.5 transform transition
    tracking-wider border border-gray-200 font-semibold
    text-base sm:text-xs xl:text-base rounded-md shadow-sm;
}

.btn-add {
    @apply
    w-fit inline-flex text-color items-center
    px-2.5 py-2.5 justify-center bg-color
    hover:bg-color-hover hover:-translate-y-0.5
    transform transition tracking-wider font-semibold text-base
    sm:text-xs xl:text-base rounded-md shadow-sm hover:text-color;
}

.btn-edit {
    @apply
    w-fit text-blue-600 inline-flex items-center
    px-1 py-1 justify-center bg-transparent
    hover:bg-blue-600 hover:-translate-y-0.5
    transform transition tracking-wider border-2 border-blue-600
    font-semibold text-base sm:text-xs xl:text-base shadow-sm hover:text-color;
}

.btn-delete {
    @apply w-fit h-8 sm:h-8 xl:h-8 inline-flex items-center
    px-3 py-1 justify-center bg-red-100 hover:bg-red-200
    text-red-500 font-semibold hover:text-red-700
    hover:-translate-y-0.5 transform transition
    tracking-wider border-0 border-gray-200 text-sm
    sm:text-xs xl:text-sm rounded-md shadow-sm;
}

/*----------------------------------
    Tooltip
----------------------------------*/
.tippy-box[data-theme~='custom'] {
    @apply bg-color text-color shadow-xl text-xs;
}

[data-tippy-content] > span:not(.badge),
[data-tippy-content] > div {
    @apply cursor-pointer font-semibold underline text-[--bg-color-hover];
}

/*----------------------------------
    Icons Warnings
----------------------------------*/
.icon-warning {
    @apply text-amber-400 animate-pulse font-semibold;
}

/*----------------------------------
    Utility
----------------------------------*/
@layer utilities {
    .stripped {
        background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, #0002 5px, #0002 10px);
    }

    .stripped-block {
        background-image: repeating-linear-gradient(130deg, transparent, transparent 5px, #0001 5px, #0001 10px);
    }

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

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

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

    .border-color {
        border-color: var(--border-color);
    }

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

    .bg-gradient-to-bottom {
        background: linear-gradient(to bottom, var(--bg-color-hover), var(--bg-color));
    }
}