@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply font-sans;
        background: #f6f6f6;
        @apply text-yumbi-black;
        @apply text-base;
    }

    /*page, base, elevated*/

    .base-panel {
        @apply bg-white w-full rounded-lg border border-yumbi-light-grey;
    }

    .elevated-panel {
        @apply bg-yumbi-lightest-grey w-full rounded-lg border border-yumbi-light-grey;
    }

    /** Typography **/
    .page-heading {
        @apply font-normal text-yumbi-black text-xl;
    }

    .modal-heading {
        @apply font-bold text-yumbi-black text-xl;
    }

    .lg-heading {
        @apply font-bold text-yumbi-black text-lg;
    }

    .md-heading {
        @apply font-semibold text-yumbi-black text-base;
    }

    /** Forms **/

    .input-label-default {
        @apply block mb-2 text-sm font-medium text-yumbi-black;
    }

    .input-default {
        @apply bg-yumbi-lightest-grey border border-yumbi-light-grey text-yumbi-black text-sm rounded-lg
        focus:ring-yumbi-blue focus:border-yumbi-blue block w-full p-2.5 placeholder-yumbi-dark-grey;
    }

    .checkbox-default {
        @apply w-4 h-4 text-yumbi-blue bg-yumbi-lightest-grey border-yumbi-light-grey rounded-sm focus:ring-yumbi-blue
        appearance-none checked:bg-blue-500 hover:cursor-pointer;
    }
    .checkbox-label-default {
        @apply ps-2 text-sm font-medium text-yumbi-black hover:cursor-pointer;
    }

    .radio-default {
        @apply w-4 h-4 text-yumbi-blue bg-yumbi-lightest-grey border-yumbi-light-grey rounded-full focus:ring-yumbi-blue
        appearance-none checked:bg-blue-500 hover:cursor-pointer;
    }
    .radio-label-default {
        @apply ps-2 text-sm font-medium text-yumbi-black hover:cursor-pointer;
    }

    /** Buttons **/

    .btn-blue {
        @apply text-white bg-gradient-to-br from-yumbi-blue to-yumbi-green
            inline-flex items-center justify-center
        rounded-full font-medium text-sm text-center px-4 py-1.5 w-fit
        hover:bg-gradient-to-bl hover:cursor-pointer
        transition duration-100 ease-in-out;
    }

    .btn-red {
        @apply text-white bg-gradient-to-r from-red-600 to-red-900
        inline-flex items-center justify-center
        rounded-full font-medium text-sm text-center px-4 py-1.5 w-fit
        hover:from-yellow-500 hover:to-red-600 hover:cursor-pointer
        transition duration-100 ease-in-out;
    }

    .btn-grey {
        @apply text-yumbi-darkest-grey bg-yumbi-lightest-grey border border-yumbi-lightest-grey
        inline-flex items-center justify-center
        rounded-full font-medium text-sm text-center px-[15px] py-[5px] w-fit
        hover:bg-yumbi-light-grey hover:border-yumbi-light-grey hover:cursor-pointer
        transition duration-100 ease-in-out;
    }

    .btn-outline {
        @apply text-yumbi-darkest-grey bg-white border border-yumbi-light-grey
        inline-flex items-center justify-center
        rounded-full font-medium text-sm text-center px-[15px] py-[5px] w-fit
        hover:bg-yumbi-light-grey hover:border-yumbi-light-grey hover:cursor-pointer
        transition duration-100 ease-in-out;
    }

    .btn-transparent {
        @apply text-yumbi-black bg-white border border-transparent
        inline-flex items-center justify-center
        rounded-full font-medium text-sm text-center px-[15px] py-[5px] w-fit
        hover:bg-yumbi-light-grey hover:border-yumbi-light-grey hover:cursor-pointer
        transition duration-100 ease-in-out;
    }

    /** backgrounds **/
    .bg-orange-red {
        @apply bg-[linear-gradient(-45deg,_theme('colors.yumbi-red'),_theme('colors.yumbi-yellow'))];
    }

    .bg-red-blue {
        @apply bg-[linear-gradient(-45deg,_theme('colors.yumbi-blue'),_theme('colors.yumbi-red'))];
    }


    .bg-yellow-green {
        @apply bg-[linear-gradient(-45deg,_theme('colors.yumbi-green'),_theme('colors.yumbi-yellow'))];
    }


    /** other **/

    .tooltip {
        @apply absolute bottom-full mb-2 left-0 transform
        px-2 py-1 text-xs text-white bg-black rounded opacity-0
        group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap;
    }

}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */



/** Login page **/
.sessions-new {
    background:  #fff url('https://www.yumbi.com/management/Content/Themes/css/img/login-bg.png') fixed no-repeat right bottom;
}