@import "tailwindcss" important;
@plugin "@tailwindcss/typography";
@plugin "daisyui" {
  themes: all;
}

@import '@oruga-ui/theme-oruga/dist/oruga.css';
@theme{
  
  --jelu_background: #262429;
  --jelu_background_accent: #262429;
  --jelu_background_contrast: #f7f5d1;

  --jelu_text_primary : #ffffff;
  --jelu_text_secondary : #aaaaaa;
  --jelu_text_accent : #69ea7d;

  --jelu_test : #69ea7d;
}

@plugin "daisyui/theme" {
  name: "jelu";
  default: false;
  prefersdark: false;
  color-scheme: "dark";
  --color-base-100: oklch(0.26 0.0096 303.83);
  --color-base-200: oklch(0.26 0.0096 303.83);
  --color-base-300: oklch(0.26 0.0096 303.83);
  --color-base-content: oklch(1 0 0);
  --color-primary: oklch(0.96 0.0469 104.63);
  --color-primary-content: oklch(0.37 0 0);
  --color-secondary: oklch(0.74 0 0);
  --color-secondary-content: oklch(94% 0.028 342.258);
  --color-accent: oklch(0.59 0.0497 77.61);
  --color-accent-content: oklch(38% 0.063 188.416);
  --color-neutral: oklch(0.37 0 0);
  --color-neutral-content: oklch(92% 0.004 286.32);
  --color-info: #6191c2;
  --color-info-content: oklch(29% 0.066 243.157);
  --color-success: oklch(0.76 0.1395 94.78);
  --color-success-content: oklch(37% 0.077 168.94);
  --color-warning: oklch(0.81 0.1483 68.18);
  --color-warning-content: oklch(41% 0.112 45.904);
  --color-error: oklch(0.71 0.1649 22.15);
  --color-error-content: oklch(27% 0.105 12.094);
  --radius-selector: 0rem;
  --radius-field: 0rem;
  --radius-box: 0rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 0.5px;
  --depth: 1;
  --noise: 0;
}

:root {
  --jelu_background: #262429;
  --jelu_background_accent: #262429;
  --jelu_background_contrast: #f7f5d1;

  --jelu_text_primary : #ffffff;
  --jelu_text_secondary : #aaaaaa;
  --jelu_text_accent : #69ea7d;

  --jelu_test : #69ea7d;

  --oruga-checkbox-border-color: var(--color-primary);
  --oruga-checkbox-active-background-color: var(--color-primary);
  --oruga-checkbox-background-color: var(--color-base-100);

  --oruga-pagination-button-color: var(--color-neutral);
  --oruga-pagination-button-border-color: var(--color-transparent);

  --oruga-variant-primary: var(--color-primary);
  --oruga-variant-success: var(--color-success);
  --oruga-variant-danger: var(--color-error);
  --oruga-variant-warning: var(--color-warning);
  --oruga-variant-info: var(--color-info);

  --oruga-datepicker-item-selected-background-color: var(--color-primary);

  --oruga-slider-tick-background: var(--color-primary);

  --oruga-slider-fill-background: var(--color-primary);

  --oruga-slider-thumb-radius: 100%;

  --oruga-slider-thumb-background: var(--color-primary);
  --oruga-slider-thumb-border: 0px solid transparent;
  --oruga-tooltip-background-color: var(--color-primary);
  --oruga-tooltip-color: var(--color-primary-content);

  --oruga-switch-active-background-color: var(--color-primary);
  --oruga-switch-checked-background: var(--color-primary);

  --oruga-modal-content-background-color: var(--color-base-100);

  --oruga-modal-content-max-height: calc(100vh - 75px);

  --oruga-steps-marker-color: var(--color-base-content);

  --oruga-steps-marker-background: var(--color-base-100);

  --oruga-loading-overlay: var(--color-jelu_overlay);

  --oruga-input-background-color: var(--color-base-100);
  --oruga-input-color: var(--color-base-content);
  
  /* --oruga-taginput-background-color: var(--color-base-content); */
  --oruga-taginput-border-color: var(--color-base-100);
  /* --oruga-taginput-color: var(--color-primary); */
  /* --oruga-taginput-item-background-color: var(--color-primary); */
  /* --oruga-taginput-item-color: var(--color-primary-content); */

  --oruga-autocomplete-item-color: var(--color-primary-content);
  --oruga-autocomplete-item-hover-background-color: var(--color-primary-content);


  --vdp-bg-color: var(--color-base-100);
  --vdp-text-color: var(--color-base-content);

}

@layer components {


/* oruga customization with daisyui */
.input.o-dpck {
  @apply px-0;
}

/* .o-chk__input { */
  /* @apply bg-none; */
/* } */

.o-checkbox .o-checkbox__input {
  @apply checkbox checkbox-primary;
}

.o-button.o-button--outlined-success {
  @apply btn btn-outline btn-success;
}

.o-button..o-button--outlined-warning {
  @apply btn btn-outline btn-warning;
}

.o-button.o-button--outlined-info {
  @apply btn btn-outline btn-info;
}

.o-sidebar__content.o-sidebar__content--left {
  @apply bg-base-100 w-fit;
}

.o-radio .o-radio__input{
  @apply radio radio-sm radio-primary bg-none;

}

/* .o-pag__link { */
  /* @apply btn text-neutral-content!; */
/* } */

.o-pagination .o-pagination__button {
  @apply btn;
}

li.o-pagination__item button.o-pagination__button.o-pagination__button--current {
  @apply btn-active btn-accent;
}

/* .o-pag__link.o-pag__link--current { */
  /* @apply btn btn-active bg-primary text-primary-content!; */
/* } */

.o-pagination__ellipsis {
  @apply p-2;
}

.o-ctrl-sel {
  @apply bg-white;
}

.o-field.o-field--horizontal .o-field__horizontal-label .o-field__label {
  @apply text-base-content;
}

.o-field .o-field__label {
  @apply text-base-content;
}

.o-field.o-field--addons .o-input__wrapper {
  @apply w-full;

  .o-input {
    @apply w-full;
  }
}

.o-field.o-field--filled {
 @apply w-full;
}

.o-field__horizontal-body {
 @apply w-full;
}

.o-field.o-field--filled .o-input__wrapper .o-input {
 @apply w-full;
} 

.o-input.o-inputit__input {
  @apply w-fit sm:w-full bg-base-100 text-base-content focus:input-accent;
}

.o-input__wrapper {
    @apply flex;
}

.o-input__wrapper .o-input {
    @apply focus:input-accent bg-white w-full;
}

.o-input--expanded input {
  @apply w-full;
}
.o-icon.o-input__icon-left {
    @apply text-accent-content;
}

.o-icon.o-input__icon-right {
    @apply text-accent-content;
}

.o-steps__step-label {
  @apply bg-base-100 text-base-content!;
}

.o-steps__title {
  @apply bg-base-100 text-base-content!;
}

.o-icon.o-icon--spin.o-icon--medium.o-load__icon {
    @apply text-gray-700;
}

/* .o-ctrl-input > input[type="number"] { */
    /* @apply w-24; */
/* } */

/* .o-acp .o-input { */
  /* @apply w-fit sm:w-full bg-base-100 text-base-content border-base-200 focus:input-accent grow; */
/* } */

/* .o-acp { */
    /* @apply grow!; */
/* } */

.o-dropdown__menu {
    @apply w-full grow;
}

.o-datepicker .o-input {
  @apply w-full border-0 focus:border-0;
}

.o-datepicker__table__cell {
  @apply hover:bg-accent;
}

/* .o-drop .o-tpck__dropdown { */
  /* height: 100%; */
  /* width: 100%; */
/* } */

.o-taginput .o-taginput__container {
    @apply w-full sm:w-full items-center h-fit;
}

.o-taginput__autocomplete {
 height: 100%;
}

.o-input.o-taginput__input {
  height: 100%;
}

/* .o-chk__label { */
  /* @apply text-lg; */
/* } */

.o-radio__label {
  @apply text-lg;
}

.o-input .o-input__input.o-taginput__input {
  /* @apply bg-base-100!; */
}

.o-field .o-autocomplete {
  @apply w-full;
}

.o-field .o-autocomplete .o-input {
  @apply w-full;
}

.o-field .o-autocomplete .o-input input {
  @apply w-full;
}
/* end oruga customization with daisyui */

.providers-ids .o-field__horizontal-body {
  @apply sm:grid sm:grid-cols-3;
}

.providers-ids .o-input {
  @apply w-full;
}

.swal2-container {
    @apply flex justify-center;
}

.swal2-container .swal2-popup.swal2-modal {
  @apply bg-base-300 text-base-content text-lg font-semibold!;
}

.bar {
    background-color: var(--jelu_background_accent);
    height: 5px;
    width: 100%;
    margin-top: 3px;
    margin-bottom: 10px;
}


@font-face {
    font-family: 'AnotherTypewriter';
    font-style: normal;
    font-display: swap;
    src: url('./atwriter.ttf') format('truetype');

  }

.typewriter {
    /* // font-family: $typewriter-font; */
    font-family: AnotherTypewriter;
}

.edit-modal {
    margin: 30px;
    width: min(900px, 90vw);
}

.event-modal {
  margin: 30px;
  height: min(600px, 70vh);
}

.author-modal {
  @apply m-2 sm:p-5;
  width: min(600px, 90vw);
}

.quote-modal {
  @apply m-5 sm:p-5;
  height: min(700px, 75vh);
  width: min(900px, 85vw);
}

.review-modal {
  @apply m-5 sm:p-5;
  height: min(700px, 75vh);
  width: min(900px, 85vw);
}

.metadata-modal {
  @apply m-5 sm:p-5;
  height: min(400px, 75vh);
  width: min(400px, 85vw);
}

.review-book-card {
  @apply h-72;
  width: min(300px, 85vw);
}

.small-cover {
    @apply w-28;
  }

.small-cover img {
  @apply w-28 relative;
}

.altered {
  filter: blur(4px) invert(38%);
  -webkit-filter: blur(4px) invert(38%);
  -moz-filter: blur(4px) invert(38%);
}

.label {
  @apply text-lg;
}

/* // book detail */

.jelu-bordered {
  @apply border-2 rounded-none border-accent;
  -webkit-box-shadow: 10px 10px 10px 0px var(--jelu_background);
  box-shadow: 10px 10px 10px 0px var(--jelu_background);
}


/* dashboard sidebar customizing */

.sidebar {
  @apply h-fit!;
}

.sidebar-header {
  @apply bg-base-100 text-base-content!;
}

.sidebar-content {
   @apply bg-base-100!;
}

.sidebar-content ul li a {
  @apply bg-base-100 rounded-lg text-base-content hover:bg-accent/50!;
}

.sidebar-content ul li span {
  @apply capitalize truncate;
}
/* end dashboard sidebar */

.o-taginput__item {
  @apply items-center;
}

.jelu-authorinput .o-taginput__item {
  @apply bg-success rounded-sm mx-1;
}

.jelu-taginput .o-taginput__item {
  @apply bg-warning rounded-sm text-warning-content mx-1;
}

.jl-taginput-empty {
  @apply cursor-pointer;
}

[data-theme="jelu"] .card {
  @apply bg-base-100 border-0;
}

[data-theme="jelu"] .jl-card {
  @apply bg-base-100 border-0;
}

[data-theme="jelu"] .alert .btn {
    @apply bg-base-100;
}

[data-theme="jelu"] .card-body .btn {
    @apply bg-base-100;
}

[data-theme="jelu"] .o-taginput__item {
    @apply text-accent-content;
}

[data-theme="jelu"] .card.card-sm {
  @apply rounded-none;
}

.card.card-sm {
  @apply rounded;
}

[data-theme="jelu"] .timeline-item {
  @apply bg-neutral rounded-none;
}

.timeline-item {
  @apply bg-accent rounded;
}

/* title search input on search page, make it fill column */
.title-input .o-ctrl-input {
  @apply w-full;
}

/* loader from https://loading.io/css/ */
.lds-facebook {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 8px;
  width: 16px;
  /* background: var(--color-accent); */
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-facebook div:nth-child(1) {
  left: 8px;
  animation-delay: -0.24s;
}
.lds-facebook div:nth-child(2) {
  left: 32px;
  animation-delay: -0.12s;
}
.lds-facebook div:nth-child(3) {
  left: 56px;
  animation-delay: 0;
}
@keyframes lds-facebook {
  0% {
    top: 8px;
    height: 64px;
  }
  50%, 100% {
    top: 24px;
    height: 32px;
  }
}
/* end loader from https://loading.io/css/ */

/* clear button positioning from https://github.com/icehaunter/vue3-datepicker  */
.v3dp__clearable {
  left: -25px!;
  top: 5px!;
}
/* end clear button */

/* vue markdown editor textarea color */
.v-md-textarea-editor pre, .v-md-textarea-editor textarea {
  @apply text-accent-content;
}

.v-md-editor-preview  {
  @apply text-black;
}

.card-body .v-md-editor-preview {
  @apply text-base-content;
}
/* end vue markdown editor */

.jelu-cursor-text {
  @apply cursor-text!;
}

.jl-formkit .o-input {
  @apply w-fit sm:w-full bg-base-100 text-base-content border-primary focus:input-accent;
}
}
