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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
.input_field_with_errors {
  @apply border-red-500;
}

.label_field_with_errors {
  @apply text-red-500;
}

@layer components {
  .card-gradient-teal-to-lime{
    @apply bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300
  }

  .card-gradient-red-to-yellow{
    @apply bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 
  }

  .mgc-button-green{
    @apply focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 
  }

  .mgc-button-default {
    @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 
  }
  
  .mgc-input-field {
    @apply block shadow rounded-md border outline-none px-3 py-2 mt-2 w-full
  }
  
  .action-button-yellow {
    @apply font-bold rounded p-2 bg-yellow-400 shadow-lg hover:bg-yellow-500
  }

  .action-button-green {
    @apply font-bold rounded p-2 bg-green-600 shadow-lg hover:bg-green-700
  }

  .action-button-red {
    @apply font-bold rounded p-2 bg-red-600 shadow-lg hover:bg-red-700
  }

  .product-suggestion-form-input-group {
    @apply flex flex-col sm:grid sm:grid-cols-4 gap-4
  }

  .heading-2 {
    @apply text-4xl font-bold dark:text-white pt-2 pb-2
  }

  .command_bridge {
    .input-field{
      @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 
    }

    .button-default {
      @apply text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm text-center px-5 py-2.5 min-h-10 content-center block
    }

    .button-warning {
      @apply focus:outline-none text-black text-center bg-yellow-300 hover:bg-yellow-400 focus:ring-4 focus:ring-yellow-200 rounded-lg font-semibold text-sm px-5 py-2.5 content-center h-10 block
    }

    .button-danger {
      @apply focus:outline-none text-white text-center bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 content-center h-10 block
    }

    .pagy {
      @apply flex justify-center mt-2 p-2 bg-white space-x-1 font-semibold text-sm text-gray-500;
      a:not(.gap) {
        @apply block rounded-lg px-3 py-1 bg-gray-200;
        &:hover {
          @apply bg-gray-300;
        }
        &:not([href]) { /* disabled links */
          @apply text-gray-600 bg-gray-100 cursor-default;
        }
        &.current {
          @apply text-white bg-gray-400;
        }
      }
      label {
        @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
        input {
          @apply bg-gray-100 border-none rounded-md;
        }
      }
    }
  }

  .products {
    .pagy {
      @apply flex justify-center mt-8 mx-2 p-2 bg-white space-x-1 font-semibold text-sm text-gray-500 rounded shadow;
      a:not(.gap) {
        @apply block rounded-lg px-3 py-1 bg-orange-200;
        &:hover {
          @apply bg-gray-300;
        }
        &:not([href]) { /* disabled links */
          @apply text-gray-600 bg-gray-100 cursor-default;
        }
        &.current {
          @apply text-white bg-gray-400;
        }
      }
      label {
        @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;
        input {
          @apply bg-gray-100 border-none rounded-md;
        }
      }
    }
  }
}