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

@layer base {
  .field_with_errors {
    @apply w-full;
  }

  .field_with_errors textarea,
  .field_with_errors select,
  .field_with_errors input {
    @apply border-2 border-red-500;
  }

  .agent_service_request.selected, .agent_client.selected, .agent_article.selected {
    @apply border-2 border-blue-400 rounded-lg;
  }

  #new_service_request.closed ~ div.client_service_request div form button {
    @apply text-white border-none cursor-not-allowed pointer-events-none select-none bg-gray;
  }
}

@layer components {
  .btn-primary {
    @apply
      cursor-pointer bg-blue hover:bg-blue-200 py-2 px-4 text-base text-white
      text-center font-medium rounded-lg h-[61px] grid place-items-center;
  }

  .btn-primary.disabled, .btn-primary:disabled {
    @apply bg-gray cursor-default
  }

  .btn-outline {
    @apply
      border border-blue hover:bg-blue-400 hover:text-white py-2 px-4 text-base text-blue text-center
      font-medium rounded-lg bg-white cursor-pointer h-[61px] grid place-items-center;
  }

  .btn-outline.disabled, .btn-outline:disabled {
    @apply bg-gray text-white border-none cursor-default
  }

  .form-input,
  .form-select {
    @apply
      w-full bg-[#E5E5E5] rounded-lg h-[50px] p-2 border-transparent
      focus:ring-transparent focus:border-2 focus:border-blue-400;
  }

  .form-textarea {
    @apply
      w-full bg-[#E5E5E5] rounded-lg p-2 border-transparent
      focus:ring-transparent focus:border-2 focus:border-blue-400;
  }

  .client-nav-item {
    @apply flex items-center justify-center h-16 px-3 cursor-pointer;
  }

  .agent-nav-item {
    @apply flex items-center cursor-pointer;
  }

  .custom-file-input::-webkit-file-upload-button {
    visibility: hidden;
  }
  .custom-file-input::before {
    @apply underline cursor-pointer text-blue;
  }
  .custom-file-input-en::before {
    content: 'Choose file';
  }
  .custom-file-input-de::before {
    content: 'Datei wählen';
  }

  .form input {
    @apply mt-1 mb-4 form-input;
  }

  .form textarea {
    @apply mt-1 mb-4 form-textarea;
  }

  .form input[type=submit] {
    @apply btn-primary;
  }

  .form select {
    @apply mt-1 mb-4 form-select;
  }

  .form label {
    @apply font-semibold;
  }

  .form div.field_with_errors input, .form div.field_with_errors textarea {
    @apply mb-0;
  }
}
