@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 */
}

/* Arial-400 */
@font-face {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 400;
  src: url("/assets/Arial-400-c871e3db.eot"); /* IE9 Compat Modes */
  src: url("/assets/Arial-400-c871e3db.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("/assets/Arial-400-2012b4b3.woff2") format('woff2'), /* Super Modern Browsers */
       url("/assets/Arial-400-50704020.woff") format('woff'), /* Modern Browsers */
       url("/assets/Arial-400-b9c3e967.ttf") format('truetype'), /* Safari, Android, iOS */
       url("/assets/Arial-400-9c44fb8d.svg#ArialMT") format('svg'); /* Legacy iOS */
}

/* Arial-700 */
@font-face {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 700;
  src: url("/assets/Arial-700-2304e937.eot"); /* IE9 Compat Modes */
  src: url("/assets/Arial-700-2304e937.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("/assets/Arial-700-483bef89.woff2") format('woff2'), /* Super Modern Browsers */
       url("/assets/Arial-700-b5e01746.woff") format('woff'), /* Modern Browsers */
       url("/assets/Arial-700-c219578b.ttf") format('truetype'), /* Safari, Android, iOS */
       url("/assets/Arial-700-6f1a6914.svg#Arial-BoldMT") format('svg'); /* Legacy iOS */
}

/* Arial-900 */
@font-face {
  font-family: 'Arial';
  font-style: normal;
  font-weight: 900;
  src: url("/assets/Arial-900-ad5168a8.eot"); /* IE9 Compat Modes */
  src: url("/assets/Arial-900-ad5168a8.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
       url("/assets/Arial-900-ec38b95d.woff2") format('woff2'), /* Super Modern Browsers */
       url("/assets/Arial-900-51f6c32e.woff") format('woff'), /* Modern Browsers */
       url("/assets/Arial-900-27076731.ttf") format('truetype'), /* Safari, Android, iOS */
       url("/assets/Arial-900-7c57df38.svg#Arial-Black") 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-lg md:text-2xl leading-[1.125] font-bold mb-6;
  }
  h3, .h3 {
    @apply text-2xl font-bold mb-6;
  }

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

  .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 p-[0.4rem] lg:p-2 button rounded-none bg-ridisi-white-transparent hover:bg-ridisi-white-100 text-ridisi-red-100 text-[0.65rem] lg:text-xs font-normal text-center;
  }
  .trix-custom-button:first-of-type{
    @apply rounded-l-md;
  }
  .trix-custom-button:last-of-type{
    @apply rounded-r-md;
  }
  .trix-custom-button.trix-active {
    @apply bg-ridisi-purple-100 text-ridisi-white-100 hover:bg-ridisi-purple-120;
  }
  input:checked + .trix-custom-button {
    @apply bg-ridisi-purple-100 border-ridisi-purple-100 text-ridisi-white-100 hover:bg-ridisi-purple-120;
  }
  input:disabled + .trix-custom-button {
    @apply bg-ridisi-white-100 text-ridisi-red-100 hover:bg-ridisi-white-100;
  }
  input:checked + .profiles-export-button {
    @apply bg-ridisi-purple-100 border-ridisi-purple-100 text-ridisi-white-100 hover:text-ridisi-purple-100;
  }
  input:disabled + .profiles-export-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-transparent text-ridisi-red-100;
  }
  .syllable-button-enabled {
    @apply bg-ridisi-purple-100 border-ridisi-purple-100 text-ridisi-white-100 hover:text-ridisi-white-100 hover:bg-ridisi-purple-120;
  }

  /* 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;
  }

  .button.rounded svg {
    @apply w-3 h-3;
  }

  .shadow-custom {
    box-shadow: 4px 0 3px -1px rgba(0, 0, 0, .1);
  }

  .edit-title:hover svg {
    @apply visible;
  }

}

@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;
  }
}