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

@layer components {
  .btn {
    @apply relative inline-flex select-none items-center
		justify-center gap-2 overflow-hidden whitespace-nowrap
		rounded-xl border
	  	disabled:pointer-events-none 
		w-full sm:w-auto transition-[color,background-color,border-color,text-decoration-color,fill,stroke,box-shadow];
    /* w-full sm:w-auto */
  }
  .btn.loading {
    @apply pointer-events-none text-transparent before:font-icon before:absolute before:left-1/2 before:-ml-[10px] before:inline-block before:animate-spin before:text-xl before:font-normal before:content-['\e922'];
  }
  .btn svg {
    @apply fill-current size-5 flex-none;
  }

  .btn-square {
    @apply btn aspect-square rounded-md;
  }

  .style-accent {
    @apply /* default  */ border-brand-base bg-brand-base text-mist-lighter shadow-theme-red-main
		/* hover    */ hover:border-brand-dark hover:bg-brand-dark hover:shadow-theme-red-hover
		/* focus    */ focus:border-brand-darker 
		/* active   */ active:border-brand-darker active:bg-brand-darker
		/* disabled */ disabled:border-raven-lighter disabled:bg-raven-lighter disabled:shadow-theme-grey-main
		/* loading  */ loading:before:text-mist-lighter;
  }

  .style-secondary {
    @apply /* default  */ border-mist-darker bg-mist-light text-steel-base shadow-theme-grey-main
		/* hover    */ hover:bg-mist-lighter hover:shadow-theme-grey-hover
		/* focus    */ focus:border-steel-lighter focus:bg-steel-lighter focus:outline-raven-lighter
		/* active   */ active:border-[#fff2f7] active:bg-[#fff2f7]
		/* disabled */ disabled:border-raven-lighter disabled:text-raven-lighter
		/* loading  */ loading:before:text-raven-base;
    svg {
      @apply text-steel-dark;
    }
  }

  .style-shadow {
    @apply /* default  */ border-brand-base bg-transparent text-raven-base shadow-theme-grey-main
		/* hover    */ hover:ring-brand-dark hover:bg-transparent hover:shadow-theme-grey-hover
		/* focus    */ focus:border-raven-base focus:bg-transparent
		/* active   */ active:border-brand-darker active:bg-transparent
		/* disabled */ disabled:border-raven-lighter disabled:bg-transparent disabled:text-raven-lighter
		/* loading  */ loading:before:text-raven-base;
  }

  .style-tertiary {
    @apply /* default  */ text-raven-base border-current
		/* hover    */ hover:text-brand-darker
		/* focus    */
		/* active   */ active:border-transparent
		/* disabled */ disabled:text-raven-lighter
		/* loading  */ loading:before:text-raven-base loading:border-transparent;
  }

  .btn-text-mobile {
    @apply text-base font-normal leading-[18px];
  }
  .btn-text-desktop {
    @apply text-[18px] font-medium leading-[28px];
  }

  .size-sm {
    @apply btn-text-mobile px-4 py-1.5;
    svg {
      @apply size-4;
    }
  }

  .size-base {
    @apply btn-text-mobile leading-5 px-4 py-2 h-9;
  }

  .size-lg {
    @apply btn-text-desktop rounded-2xl px-6 py-2 h-11;
  }

  /* accent */
  .btn-accent-sm {
    @apply btn style-accent size-sm;
  }
  .btn-accent-base,
  .facetwp-load-more {
    @apply btn style-accent size-base;
  }
  .btn-accent-lg {
    @apply btn style-accent size-lg;
  }

  /* secondary */
  .btn-secondary-sm {
    @apply btn style-secondary size-sm font-semibold;
  }
  .btn-secondary-base {
    @apply btn style-secondary size-base font-semibold;
  }
  .btn-secondary-lg {
    @apply btn style-secondary size-lg font-semibold;
  }

  /* shadow */
  .btn-shadow-sm {
    @apply btn style-shadow size-sm font-semibold border-2;
  }
  .btn-shadow-base {
    @apply btn style-shadow size-base font-semibold border-2;
  }
  .btn-shadow-lg {
    @apply btn style-shadow size-lg font-semibold border-2;
  }

  /* tertiary */
  .btn-tertiary-base {
    @apply btn size-base w-auto font-medium h-auto p-0 border-t-0 border-b border-x-0 rounded-none style-tertiary;
  }

  /* square */
  .btn-square-sm {
    @apply btn-square p-0 w-fit style-accent size-sm border-2;
  }
  .btn-square-base {
    @apply btn-square p-0 w-fit style-accent size-base border-2;
  }
  .btn-square-lg {
    @apply btn-square p-0 w-fit style-accent size-lg border-2;
  }

  /* square-shadow */
  .btn-square-shadow-sm {
    @apply btn-square p-0 w-fit style-shadow size-sm border-2;
  }
  .btn-square-shadow-base {
    @apply btn-square p-0 w-fit style-shadow size-base border-2;
  }
  .btn-square-shadow-lg {
    @apply btn-square p-0 w-fit style-shadow size-lg border-2;
  }

  /* circle */
  .btn-circle-sm {
    @apply btn-square p-0 w-fit style-accent size-sm rounded-full border-2;
  }
  .btn-circle-base {
    @apply btn-square p-0 w-fit style-accent size-base rounded-full border-2;
  }
  .btn-circle-lg {
    @apply btn-square p-0 w-fit style-accent size-lg rounded-full border-2;
  }

  /* social */
  .btn-social-sm {
    @apply btn size-sm h-auto text-mist-lighter;
  }
  .btn-social-base {
    @apply btn size-base h-auto text-mist-lighter;
    svg {
      @apply size-7;
    }
  }
  .btn-social-lg {
    @apply btn size-lg h-auto text-mist-lighter;
  }
}

@layer base {
  .ab-item {
    @apply flex items-center;
  }
}