@import "tailwindcss";
@import "flowbite/src/themes/default";

@plugin "flowbite/plugin";

@source not "../../public";
@source "../../node_modules/flowbite";

/* input.css */
@custom-variant dark (&:where(.dark, .dark *));

.label-style {
    @apply absolute text-sm text-body duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-left peer-focus:inset-s-0 peer-focus:text-fg-brand peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto;
}

.input-style {
    @apply block py-2.5 px-0 w-full text-sm text-heading bg-transparent border-0 border-b-2 border-default-medium appearance-none focus:outline-none focus:ring-0 focus:border-brand;
}

.select-style {
    @apply block py-2.5 ps-0 w-full text-sm text-body bg-transparent border-0 border-b-2 border-default-medium appearance-none focus:outline-none focus:ring-0 focus:border-brand;
}

.button-style {
    @apply cursor-pointer box-border border border-transparent focus:ring-0 shadow-xs font-medium leading-5 rounded-base text-sm px-2 py-1.5 focus:outline-none;
}

.button-pins {
  @apply p-2 rounded-xl transition-transform shadow-xs duration-100 cursor-pointer active:scale-[0.95];
}

.brand-button-style {
    @apply text-white bg-brand hover:bg-brand-strong;
}

.success-button-style {
    @apply text-white bg-success hover:bg-success-strong;
}

.danger-button-style {
    @apply text-white bg-danger hover:bg-danger-strong;
}

.return-button-style {
    @apply text-white bg-gray-500 hover:bg-gray-600;
}

.warning-button-style {
    @apply text-white bg-warning hover:bg-warning-strong;
}

.pins-style {
    @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full ;
}