@import 'tailwindcss';

@utility {
  .btn {
    @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
  }
  .card {
    @apply bg-white shadow-md rounded-lg p-4;
    .card-title {
      @apply text-lg font-bold;
    }
    .card-subtitle {
      @apply text-sm text-gray-500;
    }
    .card-description {
      @apply text-gray-700 break-words;
    }
    .card-code {
      @apply bg-gray-100 p-2;
    }
    .card-body {
      @apply text-gray-700;
    }
    .card-key {
      @apply text-xs text-gray-400;
    }
    .card-footer {
      @apply text-sm text-gray-500;
    }
  }
}

@utilities {
  .layout-menu {
    @apply bg-gray-900 p-2 text-white flex justify-between h-12;
  }
  .bg-custom-blue {
    background-color: #3490dc;
  }
}