@tailwind base;

/* Write your own custom base styles here */

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

/* Your own custom utilities */

.wrapper {
  @apply mx-3 flex flex-col min-h-screen;
  min-width: 300px;
}

@screen sm {
  .wrapper {
    @apply w-3/4 max-w-xl m-auto;
  }
}

.main {
  @apply flex-grow;
}

.footer {
  @apply mt-5 mb-2;
}

.form {
  @apply w-full bg-blue-100 p-6 rounded;
}

.fsw {
  @apply flex flex-wrap -mx-3 mb-2;
}

.fs {
  @apply w-full px-3 mb-2;
}

.flabel {
  @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
}

.input-text {
  @apply appearance-none bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight w-full;
}

.input-text:disabled {
  @apply bg-gray-300 cursor-not-allowed;
}

.input-text:focus {
  @apply outline-none bg-white;
}

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

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

.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-blue {
  @apply bg-blue-500 text-white;
}

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

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

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

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

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

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

.link {
  @apply font-medium text-blue-500 underline;
}

.link:hover {
  @apply text-blue-700;
}

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

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

.error-message {
  @apply flex items-center bg-red-200 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;
}

.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. */