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

@keyframes slideUp {
  to { transform: translateY(-20rem); }
}

@layer base {
  html,
  body,
  #root {
    @apply min-h-full bg-gray-200;
  }
}

@layer components {
  input:disabled {
    @apply bg-gray-200 cursor-not-allowed;
  }

  .text-label {
    @apply inline-flex font-semibold rounded-full px-2 leading-5;
  }

  .table-th {
    @apply border-b text-xs leading-4 font-bold uppercase;
  }

  .na-cell {
    @apply text-xs text-gray-400 !important;
  }

  .field {
    @apply mb-5;
  }

  .field label, .field-label {
    @apply block text-sm text-gray-600 font-medium mb-2;
  }

  .field input, .field-input, .field select, .field textarea {
    @apply w-full appearance-none border border-gray-300 rounded-lg text-gray-700 leading-tight p-4;
  }

  .field input:focus, .field-input:focus, .field textarea:focus {
    @apply outline-none border-gray-300 ring ring-blue-300 ring-offset-1;
  }

  input[type="color"] {
    @apply bg-white p-3;

    -webkit-appearance: none;
    height: 54px;
  }

  input[type="color"]::-moz-color-swatch, input[type="color"]::-webkit-color-swatch-wrapper {
    @apply border-0;
  }

  .checkbox-collection {
    @apply flex flex-wrap items-center;
  }

  .checkbox-group {
    @apply flex items-center mr-6;

    padding: 0.25rem 0;
  }

  .checkbox-group input[type=checkbox] {
    @apply rounded p-2;
  }

  .checkbox-group label {
    @apply pl-2
  }

  .image-preview-container {
    @apply flex flex-col space-y-4 mb-5 md:flex-row md:space-x-4 md:space-y-0;
  }

  .image-preview {
    @apply object-contain bg-gray-200 border border-white appearance-none rounded-lg w-40 h-40;
  }

  .form-actions {
    @apply flex justify-between mt-6 pt-6 border-t-2 border-gray-200;
  }

  .form-actions .btn {
    @apply px-6;
  }

  .btn {
    @apply cursor-pointer inline-flex justify-center rounded-lg px-4 py-2 leading-6 font-medium bg-white text-sm;
  }

  .btn:focus {
    @apply outline-none;
  }

  .btn-default {
    @apply bg-gray-600 text-white;
  }

  .btn-default:focus {
    @apply ring ring-offset-1 outline-none;
  }

  .btn-default:hover {
    @apply bg-gray-700;
  }

  .btn-outline-default {
    @apply border border-gray-400 text-gray-600;
  }

  .btn-outline-default:focus {
    @apply ring ring-offset-1 outline-none;
  }

  .btn-outline-default:hover {
    @apply bg-gray-600 border-gray-600 text-white;
  }

  .btn-primary {
    @apply bg-blue-600 text-white shadow;
  }

  .btn-primary:focus {
    @apply ring ring-offset-1 outline-none;
  }

  .btn-primary:hover {
    @apply bg-blue-700;
  }

  .outline-btn {
    @apply border-blue-600 text-blue-600 border;
  }

  .alert-wrapper {
    @apply absolute flex items-center justify-center w-full top-0 p-4;
  }

  .alert {
    @apply flex bg-gray-700 text-white font-semibold rounded-full shadow-xl space-x-2 py-2 pl-4 pr-6;

    animation: slideUp 1s cubic-bezier(0.4, 0, 0.6, 1) 5s 1 forwards;
  }

  .alert-icon {
    @apply rounded-full px-2 py-1;
  }

  .alert-error .alert-icon {
    @apply bg-red-600;
  }

  .alert-info .alert-icon {
    @apply bg-blue-600;
  }

  .yes-badge {
    @apply text-label text-xs bg-green-100 text-green-700;
  }

  .no-badge {
    @apply text-label text-xs bg-red-100 text-red-700;
  }

  .main-navbar-link {
    @apply flex flex-row items-center px-3 py-2 rounded-md tracking-wide text-gray-400 hover:bg-gray-900 hover:text-white;
  }

  .main-navbar-link.active {
    @apply bg-gray-900 text-white;
  }

  .page-header {
    @apply flex items-center justify-between mb-8;
  }

  .page-header h1 {
    @apply text-3xl font-semibold leading-relaxed text-gray-800;
  }

  .page-header-actions {
    @apply flex flex-row items-center print:hidden ml-auto;
  }

  .breadcrumbs {
    @apply flex flex-row items-center text-sm transition duration-200 ease-in-out text-gray-400 space-x-1;
  }

  .breadcrumbs a {
    @apply text-gray-700 hover:text-gray-900;
  }

  .page-filters {
    @apply flex flex-row justify-between items-end my-3 py-4 print:hidden;
  }

  .page-filters > form {
    @apply flex flex-1 flex-col md:flex-row md:ml-auto justify-start items-end space-x-4 space-y-4;
  }

  .page-filters .filter {
    @apply flex flex-col w-full md:w-auto;
  }

  .page-filters .filter label {
    @apply text-sm text-gray-600 font-medium mb-1;
  }

  .page-filters .filter input {
    @apply field-input shadow py-2;
  }

  .page-filters .filter select {
    @apply field-input shadow py-2 pl-4 pr-10;
  }

  .page-filters .filter input,
  .page-filters .filter select,
  .page-filters input[type=submit] {
    @apply h-11;
  }

  .page-filters input[type=submit] {
    @apply btn btn-default w-full md:w-auto;
  }

  .default-table {
    @apply table-fixed min-w-full;
  }

  .default-table th {
    @apply table-th border-gray-200 bg-white text-left text-gray-400 p-4;
  }

  .default-table tr {
    @apply bg-white odd:bg-gray-100 text-gray-900
  }

  .default-table td {
    @apply border-b border-gray-200 font-medium text-sm text-gray-600 p-4;
  }

  .default-table.valign-top td {
    vertical-align: top;
  }

  .table-row-actions {
    @apply flex flex-row justify-end space-x-4;
  }

  .table-row-actions a {
    @apply font-medium text-sm transition duration-200 ease-in-out text-gray-500 hover:text-gray-800;
  }

  .table-row-actions button {
    @apply font-medium text-sm transition duration-200 ease-in-out text-red-500 hover:text-red-800;
  }

  .panel {
    @apply block bg-white border-b border-gray-200 rounded-lg shadow;
  }

  .blank-panel {
    @apply flex flex-col items-center justify-center text-center h-56 px-10;
  }

  .blank-panel h2 {
    @apply text-xl font-medium text-gray-800 mb-1;
  }

  .blank-panel p {
    @apply text-gray-600;
  }

  .pagination-wrapper {
    @apply flex justify-end mt-4
  }

  .pagination a, .pagination .active {
    @apply inline-flex items-center border rounded-lg text-xs font-medium border-gray-300 text-gray-600 hover:bg-gray-100 px-4 py-2;
  }

  .pagination .active {
    @apply bg-indigo-100 border-indigo-500 text-indigo-600;
  }
}

@layer typography {
  .text-right {
    text-align: right;
  }
  .text-left {
    text-align: left;
  }
}
.pill-btn {
  padding: 2px 6px;
}
.mr-1 {
  margin-right: 10px;
}
.ml-1 {
  margin-left: 10px;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */