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

/* outfit-300 - latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  src: url("/assets/outfit-v2-latin-300-603216f2.eot"); /* IE9 Compat Modes */
  src: url("/assets/outfit-v2-latin-300-603216f2.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("/assets/outfit-v2-latin-300-46f3be5e.woff2") format('woff2'), /* Super Modern Browsers */
       url("/assets/outfit-v2-latin-300-25a5d0a9.woff") format('woff'), /* Modern Browsers */
       url("/assets/outfit-v2-latin-300-ffebeab2.ttf") format('truetype'), /* Safari, Android, iOS */
       url("/assets/outfit-v2-latin-300-87a2145e.svg#Outfit") format('svg'); /* Legacy iOS */
}

/* outfit-regular - latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  src: url("/assets/outfit-v2-latin-regular-7106fb9f.eot"); /* IE9 Compat Modes */
  src: url("/assets/outfit-v2-latin-regular-7106fb9f.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("/assets/outfit-v2-latin-regular-2335ac81.woff2") format('woff2'), /* Super Modern Browsers */
       url("/assets/outfit-v2-latin-regular-d0c9f952.woff") format('woff'), /* Modern Browsers */
       url("/assets/outfit-v2-latin-regular-ef6d9540.ttf") format('truetype'), /* Safari, Android, iOS */
       url("/assets/outfit-v2-latin-regular-375c8d43.svg#Outfit") format('svg'); /* Legacy iOS */
}
/* outfit-900 - latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 900;
  src: url("/assets/outfit-v2-latin-900-e6f78952.eot"); /* IE9 Compat Modes */
  src: url("/assets/outfit-v2-latin-900-e6f78952.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("/assets/outfit-v2-latin-900-46cbb438.woff2") format('woff2'), /* Super Modern Browsers */
       url("/assets/outfit-v2-latin-900-001055e2.woff") format('woff'), /* Modern Browsers */
       url("/assets/outfit-v2-latin-900-08b9a794.ttf") format('truetype'), /* Safari, Android, iOS */
       url("/assets/outfit-v2-latin-900-f82d5f50.svg#Outfit") format('svg'); /* Legacy iOS */
}

@layer components {
  h1, .h1 {
    @apply text-3xl md:text-5xl leading-[1.125] font-bold mb-6;
  }
  h2, .h2 {
    @apply text-2xl md:text-3xl leading-[1.125] font-bold mb-6;
  }
  h3, .h3 {
    @apply text-2xl font-bold mb-6;
  }

  .button {
    @apply block
      px-4 py-3
      w-fit
      bg-ridisi-white-100
      no-underline font-bold text-center
      cursor-pointer
      rounded-lg border border-transparent
      font-normal
      hover:border-ridisi-red-100
      hover:text-ridisi-red-100;
  }
  .button.small {
    @apply px-2 py-1 text-xs;
  }
  .button.rounded {
    @apply rounded-full;
  }
  .button.red {
    @apply bg-ridisi-red-100 border-ridisi-red-100 text-ridisi-red-40 hover:text-ridisi-white-100;
  }
  .button.grey {
    @apply bg-ridisi-grey-10 border-ridisi-grey-50 text-ridisi-red-100 hover:border-ridisi-red-100;
  }
  .button.white {
    @apply bg-ridisi-white-100 border-ridisi-grey-10 hover:border-ridisi-grey-50 text-ridisi-red-100;
  }
  .button.transparent {
    @apply bg-transparent border-ridisi-red-100 hover:border-ridisi-red-100 text-ridisi-red-100;
  }
  .button.orange {
    @apply bg-ridisi-orange-100 border-ridisi-orange-100 text-ridisi-white-100;
  }
  .button.purple {
    @apply bg-ridisi-purple-100 border-ridisi-purple-100 text-ridisi-white-100;
  }
  .button.with-icon {
    @apply flex gap-2 items-center;
  }
  .button.with-icon .icon {
    @apply size-[1.5em] inline-flex items-center justify-center;
  }

  .burger {
    @apply block size-6 relative;
  }
  .burger span {
    @apply block absolute origin-center transition-all duration-100 ease-out h-1 w-8 left-[calc(50%-1rem)] bg-ridisi-purple-100 rounded-lg top-[calc(50%-0.125rem)];
  }
  .burger span:first-child {
    @apply top-0;
  }
  .burger span:nth-child(3) {
    @apply bottom-0 top-auto;
  }
  .burger.is-active span:first-child {
    @apply transform translate-y-[calc(1.25rem/2)] rotate-45;
  }
  .burger.is-active span:nth-child(2) {
    @apply opacity-0;
  }
  .burger.is-active span:nth-child(3) {
    @apply transform translate-y-[calc(-1.25rem/2)] -rotate-45;
  }
  .burger-menu {
    @apply hidden lg:block lg:max-w-7xl lg:mx-auto px-16 py-8
  }
  .burger-menu.is-active {
    @apply block w-full h-dvh;
  }
  .burger-menu.is-active ul {
    @apply block;
  }
  .burger-menu.is-active ul li.links a {
    @apply inline-block bg-ridisi-grey-10;
  }

  /* Form */
  form .field {
    @apply text-left mb-4;
  }
  form label {
    @apply inline-block uppercase text-xs mb-2;
  }
  form .text-input {
    @apply w-full bg-transparent border-b border-ridisi-red-100 pb-2 text-ridisi-red-100 focus:outline-none;
  }
  .contact-form {
    label {
      @apply normal-case text-base;
    }
    .text-input {
      @apply w-full pl-4 py-3 border rounded-full border-ridisi-black-100 text-ridisi-black-100 shadow-inner focus:outline-ridisi-grey-50;
    }
    .textarea {
      @apply w-full pl-4 py-3 border rounded-md border-ridisi-black-100 text-ridisi-black-100 shadow-inner outline-offset-4 focus:outline-ridisi-grey-50;
    }
  }
  .select select {
    @apply w-full pl-4 py-3 border rounded-full bg-transparent border-ridisi-red-100 text-ridisi-red-100 shadow-inner outline-none appearance-none
  }
  .select {
    @apply relative after:content-['_'] after:rounded-[2px] after:border-ridisi-red-100 after:border-r-4 after:border-t-4 after:block after:h-[0.625rem] after:w-[0.625rem] after:mt-[-0.4375rem] after:pointer-events-none after:absolute after:top-1/2 after:right-[1rem] after:rotate-[135deg]
  }


  /* App Nav Bar */
  .app-nav-bar ul li {
    @apply md:w-full text-ridisi-red-100 fill-ridisi-red-100 hover:text-ridisi-white-100 hover:fill-ridisi-white-100;
  }

  /* Grid Items */
  .grid-item {
    @apply inline-block w-28 h-28 overflow-hidden box-border rounded-lg bg-white text-center text-ridisi-red-100;

    &.editable {
      @apply hover:outline hover:outline-ridisi-orange-100;
    }

    &.uneditable {
      @apply cursor-not-allowed;
    }

    .grid-item-inner {
      @apply w-full h-full items-center flex flex-col justify-center p-2 gap-1;
    }
  }

  /* Pages */
  .page {
    @apply break-after-all;

    &.portrait {
      @apply w-[21cm] h-[29.7cm];
    }
    &.landscape {
      @apply w-[29.7cm] h-[21cm];
    }
    &p, &h1, &h2, &h3 {
      @apply break-after-avoid;
    }
  }

  /* Editor */
  trix-editor {
    @apply px-4 py-2;
  }
  .trix-custom-button {
    @apply button rounded-full grow hover:bg-ridisi-purple-100 hover:border-ridisi-purple-100 hover:text-ridisi-white-100 text-ridisi-red-100 text-xs font-normal text-wrap text-center;
  }
  .trix-custom-button.trix-active {
    @apply bg-ridisi-purple-100 border-ridisi-purple-100 text-ridisi-white-100;
  }
  input:checked + .trix-custom-button {
    @apply bg-ridisi-purple-100 border-ridisi-purple-100 text-ridisi-white-100;
  }
  input:disabled + .trix-custom-button {
    @apply hover:bg-ridisi-white-100 hover:border-ridisi-white-100 hover:text-ridisi-red-100;
  }

  /* PDF Grid export */
  .pdf {
    @apply m-0 p-0 bg-ridisi-white-100 w-full;

    .picto svg {
      @apply mx-auto;
    }
  }

  /* Profiles */
  .syllable-button-disabled {
    @apply  bg-ridisi-white-100 text-ridisi-red-100 hover:border-ridisi-purple-100 hover:text-ridisi-white-100
  }
  .syllable-button-enabled {
    @apply bg-ridisi-purple-100 border-ridisi-purple-100 text-ridisi-white-100 hover:text-ridisi-white-100;
  }

  /* Contextual Menu */
  .contextual-menu {
    @apply bg-white border border-gray-200 rounded-lg shadow-lg;
  }

  .contextual-menu-content {
    @apply p-2 space-y-1;
  }

  .contextual-menu-button {
    @apply w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 rounded transition-colors duration-150;
  }
}

@layer utilities {
  /* Hide number input handles buttons */
  .hide-number-handles {
    -moz-appearance: textfield;
    appearance: textfield;
  }
  
  .hide-number-handles::-webkit-outer-spin-button,
  .hide-number-handles::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
}