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

/**
  * Ensure that the admin content area is full height, minus the navbar.
  */
.admin-container {
  height: calc(100vh - 3.5rem);
  overflow: hidden;
}

input[disabled],
button[disabled],
button[disabled]:hover {
  @apply bg-gray-200;
  @apply text-gray-700;
  @apply opacity-50;
  @apply cursor-not-allowed;
}

/**
  * Placed here because focus:border-b-4 does not work
  */
input:focus,
textarea:focus,
select:focus {
  border-bottom-width: 2px !important;
}
input.border-red-300:focus,
textarea.border-red-300:focus,
select.border-red-300:focus {
  border-width: 1px !important;
  border-bottom-width: 3px !important;
}

.msg-wrapper {
  white-space: pre-wrap;
}

/**
  * Scrollbar
  */

 /* Works on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: theme('colors.prussian-blue.400') transparent;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.main-scrollbar {
  overflow: overlay !important;
}

.main-scrollbar::-webkit-scrollbar {
  width: 11px !important;
  height: 11px !important;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: theme('colors.prussian-blue.400');
  border-radius: 20px;
  border: 3px solid transparent;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: theme('colors.prussian-blue.500');
}

*::-webkit-scrollbar-thumb:active {
  background-color: theme('colors.prussian-blue.600');
}

.main-scrollbar::-webkit-scrollbar-thumb {
  border: 3px solid theme('colors.gray.100') !important;
}

/**
  * Ionicons
  */

ion-icon {
  pointer-events: none;
}