tailwind.base.css

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

@layer components {
  .card-shadow {
    @apply shadow-xl hover:shadow-xl-hover transition-shadow;
  }

  .btn {
    @apply flex flex-row items-center text-[1em] leading-none p-[1em] rounded-[0.25em] transition-all duration-100 focus:outline-none disabled:opacity-50;
  }

  .btn-default {
    @apply btn text-white
      bg-gray-700 hover:bg-gray-800 active:bg-gray-900
      border border-gray-700 focus:ring-4 focus:ring-gray-200;
  }

  .btn-primary {
    @apply btn text-white
      bg-primary hover:bg-primary-darker focus:bg-primary-darker active:bg-primary-darkest
      border border-primary focus:ring-4 focus:ring-primary-lightest;
  }

  .btn-secondary {
    @apply btn text-white
      bg-secondary hover:bg-secondary-darker focus:bg-secondary-darker active:bg-secondary-darkest
      border border-secondary focus:ring-4 focus:ring-secondary-lightest;
  }

  .btn-outline {
    @apply btn text-main
    bg-transparent hover:text-primary-darker focus:text-primary-darker active:text-primary-black
    border border-gray-300 hover:border-primary-lighter focus:border-primary-lighter focus:ring-4 focus:ring-primary-lightest active:border-primary-darker;
  }

  .btn-light {
    @apply btn text-main
      bg-white hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100
      border border-white focus:ring-4 focus:ring-gray-300;
  }

  .badge-btn {
    @apply flex items-center justify-center px-4 py-1 text-white rounded backdrop-blur;
  }

  .card-icon {
    @apply text-primary opacity-50 group-hover:text-secondary group-hover:opacity-100 transition-colors transition-opacity;
  }
}

html {
  --mdc-typography-font-family: var(--font-family-main);
}