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

/*

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

*/

/* Flash */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.fade-out {
  animation: fadeOut 1s ease-out forwards;
  animation-delay: 2s;
}

/* Pagy */
.pagy-nav,
.pagy-nav-js {
  @apply flex space-x-2;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page a,
.pagy-nav-js .page.active,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply block rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
  &:hover{
    @apply bg-gray-800 text-white;
  }
  &:active{
    @apply bg-gray-800 text-white;
  }
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
  &:hover {
    @apply text-gray-400 bg-gray-800;
  }
  &:active {
    @apply text-gray-400 bg-gray-800;
  }
}

.pagy-nav .page.active,
.pagy-nav-js .page.active {
  @apply text-white cursor-default bg-gray-800;
  &:hover {
    @apply text-white bg-gray-800;
  }
  &:active {
    @apply bg-gray-800 text-white;
  }
}


.pagy-combo-nav-js {
  @apply flex max-w-max rounded-full px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
}

.pagy-combo-nav-js .pagy-combo-input {
  @apply bg-white px-2 rounded-sm
}

.pagy-combo-nav-js .page.prev,
.pagy-combo-nav-js .page.next {
  &:hover {
    @apply text-gray-800;
  }
  &:active {
    @apply text-gray-800;
  }
}

.pagy-combo-nav-js .page.prev.disabled,
.pagy-combo-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/*
 * 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.
 *




 */
/*
 * CSS File of Material icons.
 * CSS code based on:
 * https://github.com/google/material-design-icons
 */




/* Use the font */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/assets/material-icons-regular-d7f083631d2357fe2c2c75d353cb1d6deaceb0249e07d00a59f9cdffbbccf35a.woff2) format('woff2'),
       url(/assets/material-icons-regular-a9f2f380dd4aab1414f47620e68d9bf7d45cece149be7fec8a94e532e1660cb1.woff) format('woff');
}

/* Base class */
.material-icons,
.mi {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
/* Rules for sizing the icon. */
.material-icons.md-18, .mi.md-18 { font-size: 18px; }
.material-icons.md-24, .mi.md-24 { font-size: 24px; }
.material-icons.md-36, .mi.md-36 { font-size: 36px; }
.material-icons.md-48, .mi.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark, .mi.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive, .mi.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light, .mi.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive, .mi.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* Rules to rotate items */
.material-icons.r90, .mi.r90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.material-icons.r180, .mi.r180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.material-icons.r270, .mi.r270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.material-icons.flip-horizontal, .mi.flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.material-icons.flip-vertical, .mi.flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}