@tailwind base;

/* Write your own custom base styles here */

/* Start purging... */
@tailwind components;
/* Stop purging. */

/* Your own custom utilities */

.ibtn {
  @apply p-1 text-gray-300 text-xs w-6 h-6 rounded;
}

.ibtn:hover {
  @apply text-gray-400;
}

.ibtn:active {
  @apply text-gray-800;
}

.ibtn:disabled {
  @apply opacity-50 cursor-wait;
}

.btn {
  @apply font-bold py-2 px-4 rounded mx-2;
}

.btn:first-child {
  @apply ml-0;
}

.btn-green {
  @apply bg-green-800 text-white;
}

.btn-blue {
  @apply bg-blue-800 text-white;
}

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

.btn-red {
  @apply bg-red-500 text-white;
}

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

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

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

.btn:disabled {
  @apply opacity-50 cursor-wait;
}

.info-message {
  @apply flex items-center bg-yellow-100 border-solid border border-yellow-500 rounded text-yellow-700 py-2 px-3;
}

.info-message:before {
  @apply mr-2;
  content: '\24D8';
}

.error-message {
  @apply flex items-center bg-red-100 border-solid border border-red-700 rounded text-red-700 py-2 px-3;
}

.error-message:before {
  @apply mr-2;
  content: '\274c';
}

.react-calendar {
  @apply border border-gray-900;
}

.react-calendar button {
  @apply outline-none;
}

.react-calendar__navigation {
  @apply text-gray-100 bg-gray-900 flex;
}

.react-calendar__navigation button {
  @apply px-3 py-2;
  min-width: 2rem;
}

.react-calendar__navigation button[disabled] {
  @apply text-gray-700 cursor-not-allowed;
}
.react-calendar__month-view__weekdays {
  @apply text-sm text-center uppercase font-bold;
}
.react-calendar__month-view__weekdays__weekday {
  @apply p-1;
}

.react-calendar__month-view__weekdays__weekday abbr {
  @apply no-underline;
}

.react-calendar__month-view__weekNumbers {
  @apply font-bold;
}
.react-calendar__month-view__weekNumbers .react-calendar__tile {
  @apply flex items-center content-center;
}
.react-calendar__month-view__days__day--weekend {
  @apply text-red-600;
}
.react-calendar__month-view__days__day--neighboringMonth {
  @apply text-gray-600;
}
.react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__century-view .react-calendar__tile {
}

.react-calendar__tile {
  @apply py-1;
}

.react-calendar__tile--free {
  @apply bg-green-200;
  cursor: pointer;
}

.react-calendar__tile--free:hover:not(.react-calendar__tile--unselectable):not(.react-calendar__tile--not-interactive) {
  @apply bg-gray-500;
}

.react-calendar__tile--booked {
  @apply bg-red-200 cursor-not-allowed;
}

.react-calendar__tile--past {
  @apply bg-gray-400 cursor-not-allowed;
}

.react-calendar__tile:disabled {
  @apply bg-gray-300;
}

.react-calendar__tile--selected {
  @apply bg-blue-400;
}

.react-calendar__tile--selected:hover:not(.react-calendar__tile--not-interactive) {
  @apply bg-blue-600;
}

.react-calendar__tile--unselectable {
  @apply cursor-not-allowed;
}

.react-calendar__tile--selected-start {
  @apply rounded-tl-sm rounded-bl-sm;
}

.react-calendar__tile--selected-end {
  @apply rounded-tr-sm rounded-br-sm;
}

.react-calendar__tile--now {
  @apply text-green-400;
}

.react-calendar__tile--not-interactive {
  @apply cursor-default;
}

/* Start purging... */
@tailwind utilities;
/* Stop purging. */