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

@layer components {
  /* h */
  h1,h2,h3 {
    @apply font-fredoka font-bold;
  }
  h1 {
    @apply text-4xl leading-10;
  }
  h2 {
    @apply text-2xl leading-8;
  }
  h3 {
    @apply text-base leading-6;
  }
  h4 {
    @apply font-fredoka text-[10px] font-medium leading-4;
  }

  @media screen(md) {
    h1 {
      @apply text-6xl leading-[4.5rem];
    }
    h2 {
      @apply text-5xl leading-[3.5rem];
    }
    h3 {
      @apply text-2xl leading-8;
    }
    h4 {
      @apply text-base leading-6;
    }
  }

  /* p */
  p, .p-big {
    @apply font-plusJakarta font-medium text-sm leading-6;
  }
  .p-small {
    @apply font-plusJakarta font-medium text-xs leading-4;
  }
  .p-btn {
    @apply font-fredoka font-bold text-2xl leading-8;
  }
  @media screen(md) {
    p, .p-big {
      @apply text-xl leading-8;
    }
    .p-small {
      @apply font-plusJakarta font-medium text-sm leading-4;
    }
  }

  .active {
    @apply py-2 border-b-2;
    border-color: theme('colors.orange-500');
  }

  /* buttons */
  .enable-primary-btn {
    @apply relative overflow-hidden w-max px-6 py-1 mx-auto border-[1px] rounded-lg md:px-8 md:py-2.5;
    background-color: theme('colors.orange-500');
    border-color: theme('colors.orange-900');
    box-shadow: theme('boxShadow.orange');
  }
  .enable-secondary-btn {
    @apply relative overflow-hidden w-max px-6 py-1 mx-auto border-[1px] rounded-lg md:px-8 md:py-2.5;
    background-color: theme('colors.slate-100');
    border-color: theme('colors.blue-950');
    box-shadow: theme('boxShadow.blue-big');
  }

  .enable-primary-icon-btn {
    @apply relative overflow-hidden shrink-0 w-max min-w-10 h-10 p-2 mx-auto border-[1px] rounded-lg md:min-w-[52px] md:h-[52px] md:p-3;
    background-color: theme('colors.orange-500');
    border-color: theme('colors.orange-900');
    box-shadow: theme('boxShadow.orange');
  }
  .enable-secondary-icon-btn {
    @apply relative overflow-hidden shrink-0 w-max min-w-10 h-10 p-2 mx-auto border-[1px] rounded-lg md:min-w-[52px] md:h-[52px] md:p-3;
    background-color: theme('colors.slate-100');
    border-color: theme('colors.blue-950');
    box-shadow: theme('boxShadow.blue-big');
  }
  .enable-secondary-icon-btn-small {
    @apply relative overflow-hidden shrink-0 w-max min-w-10 h-10 p-2 mx-auto border-[1px] rounded-lg;
    background-color: theme('colors.slate-100');
    border-color: theme('colors.blue-950');
    box-shadow: theme('boxShadow.blue-big');
  }

  .disable-primary-btn {
    @apply relative overflow-hidden w-max px-6 py-1 mx-auto border-[1px] rounded-lg md:px-8 md:py-2.5;
    background-color: theme('colors.slate-300');
    border-color: theme('colors.slate-400');
    box-shadow: theme('boxShadow.slate-400-btn');
  }

  .disable-secondary-btn {
    @apply relative overflow-hidden w-max px-6 py-1 mx-auto border-[1px] rounded-lg md:px-8 md:py-2.5;
    background-color: theme('colors.slate-100');
    border-color: theme('colors.slate-400');
    box-shadow: theme('boxShadow.slate-400-btn');
  }

  .disable-primary-icon-btn {
    @apply relative overflow-hidden shrink-0 w-max min-w-10 h-10 p-2 mx-auto border-[1px] rounded-lg md:min-w-[52px] md:h-[52px] md:p-3;
    background-color: theme('colors.slate-300');
    border-color: theme('colors.slate-400');
    box-shadow: theme('boxShadow.slate-400-btn');
  }

  .disable-secondary-icon-btn {
    @apply relative overflow-hidden shrink-0 w-max min-w-10 h-10 p-2 mx-auto border-[1px] rounded-lg md:min-w-[52px] md:h-[52px] md:p-3;
    background-color: theme('colors.slate-100');
    border-color: theme('colors.slate-400');
    box-shadow: theme('boxShadow.slate-400-btn');
  }

  /* accordion css */
  .accordion-open {
    @apply mx-8 pl-[30px] py-6 border-l-2 border-blue-950;
  }
  .accordion-close {
    @apply cursor-pointer mx-8 pl-[30px] py-6 border-l-2 border-slate-300 hover:bg-slate-200;
  }

  /* filters css */
  .filters-container {
    @apply z-10 flex flex-row justify-between w-full mt-4 px-8 md:mt-8 md:px-12 md:px-[77px] xl:flex-col xl:justify-start xl:gap-8 xl:min-w-[352px] xl:mt-12 xl:p-0 xl:pl-[77px] xl:pr-8 xl:border-r-[1px] xl:border-slate-300;
  }
  .filters-container > div,
  .filters-container > span > div {
    @apply flex flex-row items-center justify-center space-x-2 sm:w-fit lg:justify-start;
  }
  .filters-container > div > label,
  .filters-container > span > div > label {
    @apply relative flex items-center rounded-full cursor-pointer;
  }
  .filters-container > div > label > input,
  .filters-container > span > div > label > input {
    @apply relative h-4 w-4 cursor-pointer appearance-none bg-slate-300 rounded-full border-[1px] border-blue-950 transition-all before:absolute before:top-2/4 before:left-2/4 before:block before:h-12 before:w-12 before:-translate-y-2/4 before:-translate-x-2/4 before:rounded-full before:bg-slate-300 before:opacity-0 before:transition-opacity checked:border-none checked:bg-blue-950 checked:before:bg-blue-950 hover:before:opacity-10;
  }
  .filters-container > div > label > span,
  .filters-container > span > div > label > span {
    @apply absolute text-slate-50 transition-opacity opacity-0 pointer-events-none top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4;
  }
  .filters-container > div > p,
  .filters-container > span > div > p {
    @apply text-start leading-none md:mb-0.5;
  }

  /* text pages css */
  .container-info {
    @apply space-y-12 md:space-y-20 py-12 md:py-20 border-b-[1px] border-slate-300;
  }
  .container-info:first-child {
    @apply pt-0;
  }
  .container-info:last-child {
    @apply pb-0 border-none;
  }
  .paragraph {
    @apply space-y-8 md:space-y-12;
  }
  .list {
    @apply space-y-4 ml-4 list-disc list-outside;
  }
  .note {
    @apply border-l-2 border-blue-950 pl-4;
  }
  .img {
    @apply w-full h-[183px] md:h-[360px] lg:h-[372px];
  }
  div:has( > .img) {
    @apply space-y-4;
  }

  /* manuals css */
  .manual-short {
    @apply relative flex shrink-0 w-[120px] h-[104px] mb-[3px] border-[1px] border-slate-300 rounded-lg shadow-slate-300 md:w-52;
  }
  .manual-large {
    @apply relative flex shrink-0 w-[120px] h-36 flex mb-[3px] border-[1px] border-slate-300 rounded-lg shadow-slate-300 md:w-52 md:h-[184px];
  }
  .manual-large-horizontal{
    @apply relative flex shrink-0 w-[312px] h-[120px] mb-[3px] border-[1px] border-slate-300 rounded-lg shadow-slate-300;
  }
  li:has( > .manual-short ),
  li:has( > .manual-large ) {
    @apply break-inside-avoid bg-slate-50 flex flex-col space-y-2 w-[138px] h-min p-2 pb-3 border-[1px] border-blue-950 rounded-lg md:space-y-4 md:w-60 md:p-4;
  }
  li:has( > .manual-large-horizontal ) {
    @apply hidden bg-slate-50 flex-col space-y-4 w-[344px] h-min p-4 border-[1px] border-blue-950 rounded-lg md:flex lg:hidden xl:flex;
  }
  .manual-short ~ span,
  .manual-large ~ span {
    @apply shrink-0 w-max mx-auto px-1 border-[1px] border-blue-950 rounded shadow-blue-small lg:mx-0 lg:py-0.5;
  }
  .manual-large-horizontal ~ span {
    @apply shrink-0 w-max mx-auto px-1 py-0.5 border-[1px] border-blue-950 rounded shadow-blue-small lg:mx-0;
  }
  .manual-short ~ span > h4,
  .manual-large ~ span > h4 {
    @apply text-center uppercase md:leading-none;
  }
  .manual-large-horizontal ~ span > h4 {
    @apply text-center uppercase md:leading-none;
  }
  .manual-short ~ a > p,
  .manual-large ~ a > p {
    @apply text-xs text-center leading-4 md:leading-8 md:text-xl lg:text-start;
  }
  .manual-large-horizontal ~ a > p {
    @apply text-center lg:text-start;
  }

  /* categories css */
  .category-big {
    @apply bg-slate-50 w-min p-4 mx-auto border-[1px] border-blue-950 rounded-lg;
  }
  .category-big > div {
    @apply bg-cover bg-center w-28 h-28 mb-[3px] border-[1px] border-slate-300 rounded-lg shadow-slate-300 md:w-[176px] md:h-[176px];
  }
  .category-big > h4 {
    @apply text-center uppercase mt-4;
  }

  .category-small {
    @apply bg-slate-50 w-min p-4 mx-0 border-[1px] border-blue-950 rounded-lg;
  }
  .category-small > div {
    @apply bg-cover bg-center w-8 h-8 mb-[3px] border-[1px] border-slate-300 rounded-lg shadow-slate-300 md:w-16 md:h-16;
  }
}