@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,200;9..40,400;9..40,500;9..40,600;9..40,900&display=swap');

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

html {
  @apply relative;
}

body {
  font-family: 'DM Sans', sans-serif;
}

.pagination nav {
  @apply flex justify-center w-full max-w-[500px] mx-auto text-center my-3;

  span {
    @apply p-1 grow;
  }

  .active {
    @apply bg-blue-400 rounded text-white;
  } 

  > .active  {
    @apply bg-blue-500;
  }
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], select, textarea, input[type="date"], input[type="time"] {
  @apply w-full rounded border-0 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6;
}

label, .label {
  @apply text-sm font-semibold text-gray-900 my-2 block;
}

.blanket {
  @apply fixed inset-0 bg-slate-950/80;
  z-index: 100;
}

.button--base {
  @apply transition-all	ease-in-out duration-100;
  @apply inline-flex items-center justify-center px-3 py-1.5 border text-sm font-medium rounded shadow focus:outline-none focus:ring-2 focus:ring-offset-2;
  @apply disabled:bg-slate-100 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed hover:disabled:bg-slate-100;
}

.button-sm--base {
  @apply inline-flex items-center justify-center px-2 py-0.5 border text-sm font-medium rounded shadow focus:outline-none focus:ring-2 focus:ring-offset-2;
  @apply disabled:bg-slate-100 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed hover:disabled:bg-slate-100;
}

.button-primary {
  @apply button--base;
  @apply text-white border-blue-700 bg-blue-600 hover:bg-blue-700 hover:text-blue-100 focus:ring-blue-500;
}

.button-secondary {
  @apply button--base;
  @apply text-blue-600 bg-blue-50 hover:bg-blue-100 focus:ring-blue-500 border-blue-300;
}

.button-primary--danger {
  @apply button--base;
  @apply text-white bg-red-600 hover:bg-red-700 hover:text-red-100 focus:ring-red-500;
}

.button-secondary--danger {
  @apply button--base;
  @apply text-red-600 bg-red-50 hover:bg-red-100 focus:ring-red-500 border-red-300;
}

.button-tertiary--danger {
  @apply button--base;
  @apply text-red-600 bg-none hover:bg-none focus:ring-red-500 border-transparent shadow-none outline-none;
}

.button-primary-sm {
  @apply button-sm--base;
  @apply text-white bg-blue-600 hover:bg-blue-700 hover:text-blue-100 focus:ring-blue-500;
}

.button-secondary-sm {
  @apply button-sm--base;
  @apply text-blue-600 bg-blue-50 hover:bg-blue-100 focus:ring-blue-500 border-blue-300;
}

.button-primary-sm--danger {
  @apply button-sm--base;
  @apply text-white bg-red-600 hover:bg-red-700 hover:text-red-100 focus:ring-red-500;
}

.button-secondary-sm--danger {
  @apply button-sm--base;
  @apply text-red-600 bg-red-50 hover:bg-red-100 focus:ring-red-500 border-red-300;
}

.button-tertiary-sm--danger {
  @apply button-sm--base;
  @apply text-red-600 bg-none hover:bg-none focus:ring-red-500 border-transparent shadow-none outline-none;
}

.button--base:disabled,
.button-sm--base:disabled {
  @apply cursor-not-allowed text-slate-500 hover:text-slate-500 bg-slate-100 border-slate-200;
}

.button-group {
  @apply flex;

  button {
    @apply rounded-none border-slate-300 bg-white hover:bg-slate-100 text-slate-700 [text-shadow:_0_1px_0_rgb(255_255_255_/_40%)];
  }

  button:first-child {
    @apply rounded-l-md;
  }

  button:last-child {
    @apply rounded-r-md;
  }

  button:not(:first-child) {
    @apply -ml-px;
  }
}
/*
 * 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.
 *


 */