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

@layer components {
  .sidebar {
    @apply right-0 top-0 h-full w-full max-w-xl bg-white z-50 transform transition-all duration-200 ease-in-out;
  }

  .sidebar-background {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-200 ease-in-out;
  }

  .fade-in {
    @apply opacity-0;
    animation: fadeIn 0.2s ease-in-out forwards;
  }

  .fade-out {
    @apply opacity-100;
    animation: fadeOut 0.2s ease-in-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

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

/*

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

.title_font {
  @apply tracking-tight; 
  font-weight: 700;
  font-family: 'Chillax-Semibold', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0px;
  @apply min-h-screen flex flex-col;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
select,
textarea,
.select {
  @apply px-2.5 py-1.5 min-w-0 flex-auto appearance-none rounded border border-zinc-900/20 bg-white shadow-sm shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-500/10;
}

input[type="checkbox"] {
  @apply min-w-0 appearance-none rounded border border-zinc-900/20 bg-white p-2 shadow-sm shadow-zinc-800/5 placeholder:text-zinc-400 focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-500/10;

}

label, .label {
  @apply inline-block;
  @apply text-slate-700;
  @apply text-sm;
  @apply font-bold;
  @apply mb-2;
}

.home-game label {
  @apply text-white;
}

.away-game label {
  @apply text-slate-700;
}

a {
  @apply text-blue-500 hover:text-blue-600;
}

nav {
  @apply list-none flex justify-between items-center;
  
  a {
    @apply text-white transition-all hover:text-blue-400;
  }
}

.button {
  @apply px-2.5 py-1.5 text-sm rounded pointer-events-auto truncate transition-all ease-in-out cursor-pointer relative bg-white text-center font-medium text-slate-700 shadow-sm ring-1 ring-slate-700/10 hover:bg-slate-50 hover:text-slate-900;
}

.button--primary {
  @apply button;
  @apply text-white hover:text-slate-200 bg-blue-600 hover:bg-blue-700 ring-blue-700/10;
}

.button--secondary {
  @apply button;
  @apply text-slate-700 hover:text-slate-800 hover:bg-blue-100 ring-blue-700/10;
}

.button--danger {
  @apply button;
  @apply text-white;
  @apply hover:text-slate-200;
  @apply bg-rose-600;
  @apply hover:bg-rose-700;
  @apply ring-rose-700/10;
}

.button--danger-secondary {
  @apply button;
  @apply text-rose-500;
  @apply hover:text-rose-600;
  @apply hover:bg-rose-50;
  @apply hover:ring-rose-700;
  @apply ring-rose-500/50;
}

.button--not-ready {
  @apply button;
  @apply bg-transparent;
  @apply hover:bg-transparent;
  @apply ring-slate-400/80;
  @apply text-slate-400;
  @apply hover:text-slate-400;
}


.league>input {
  @apply absolute;
  left: -100000px;
}

.league>input:checked+label {
  @apply py-2 px-4 rounded border text-white bg-blue-600 border-blue-600 hover:text-blue-100 hover:bg-blue-700 hover:border-blue-900 bg-rose-600 border-rose-600 hover:text-rose-100 hover:bg-rose-700 hover:border-rose-900;
}

.league label {
  @apply py-2 px-4 rounded text-blue-500 hover:border-blue-500 hover:text-blue-600 hover:bg-blue-100 mx-auto grow w-full text-center border-2;
  cursor: pointer;
}

.sidebar {
  @apply box-border fixed bg-white z-10 shadow-lg;
  left: 50%;
  top: -50%;
  transform: translate(-50%, -50%);
  -webkit-animation: slide-left .25s forwards;
  animation: slide-left .5s forwards;
}

.sidebar-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 100px);
  background: rgba(0, 0, 0, .9);
  z-index: 1;
}

@-webkit-keyframes slide-left {
  10% {
    top: -360px;
  }

  40% {
    top: 70%;
  }

  100% {
    top: 50%;
  }
}

@keyframes slide-left {
  10% {
    top: -360px;
  }

  40% {
    top: 70%;
  }

  100% {
    top: 50%;
  }
}


.game-card {
  @apply overflow-hidden relative shadow-sm;
}

.svg-gold {
  filter: invert(85%) sepia(47%) saturate(2852%) hue-rotate(340deg) brightness(107%) contrast(97%);
}

.confirmed {
  filter: invert(39%) sepia(99%) saturate(5293%) hue-rotate(218deg) brightness(97%) contrast(90%);
}

.card-title {
  width: calc(100% - 16px);
}

.messages-error {
  @apply bg-red-100;
  @apply p-3;
  @apply text-red-700;
  @apply border;
  @apply border-red-400;
  @apply rounded;
  @apply mb-4;

  >h2 {
    @apply font-bold;
  }
}

.notification {
  @apply p-3 text-center border;
}

.notification + .notification {
  @apply mt-0;
}

.flash-danger {
  @apply border-rose-600 bg-rose-500 text-white;
  @apply dark:border-rose-800 dark:bg-rose-700 dark:text-white;
}

.flash-success {
  @apply border-emerald-600 bg-emerald-500 text-white;
  @apply dark:border-emerald-800 dark:bg-emerald-700 dark:text-white;
}


.alert {
  @apply bg-orange-500;
  @apply text-white;
  @apply border-orange-700;
}

@-webkit-keyframes slide {
  10% {
    top: 40px;
  }

  20% {
    top: 10px;
  }

  90% {
    top: 10px;
  }

  95% {
    top: 40px;
  }

  100% {
    top: -200px;
  }
}

@keyframes slide {
  10% {
    top: 40px;
  }

  20% {
    top: 10px;
  }

  90% {
    top: 10px;
  }

  95% {
    top: 40px;
  }

  100% {
    top: -200px;
  }
}

.update:hover>span {
  display: none
}

.update:hover:before {
  content: 'Update Response';
}

/* Just for fun */
.gm {
  position : relative;
  overflow: hidden;
  text-align: center;
  transition : .6s;
}
  
.gm > .light {
  position : absolute;
  width : 50px;
  height: 150px;
  background-color: rgba(255, 255, 255, 0.3);
  transform: skew(-20deg) translate(-100px, -30px);
}

.gm:hover > .light {
  background-color: rgba(255, 255, 255, 0.2);
  transform: skew(-20deg) translate(150px, -70px);
  transition : .7s;
}

.positions > span:after {
  content: ', ';
}

.positions > span:last-child:after {
  content: '';
}

.simple-calendar {
  nav a {
    @apply text-blue-600 text-xs border border-blue-500 rounded-none px-2.5 py-1;

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

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

    &:not(:first-child) {
      @apply -ml-px;
    }
  }

  table {
    @apply w-full max-w-full border-collapse border border-gray-200 shadow-inner;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
  }

  tr {
    @apply border-collapse;
  }

  th {
    @apply p-1.5 border border-gray-200 text-left;
  }

  td {
    @apply p-1.5 border border-gray-200 align-top w-[14%];
  }

  .day {
    @apply h-[100px];
  }

  .game-away, .game-home {
    @apply my-2;
  }

  .game-home {
    @apply bg-blue-950 text-white border border-blue-950 rounded text-sm;

    a {
      @apply text-white hover:text-blue-200;
    }
  }

  .game-away {
    @apply bg-white/30 text-slate-700 border rounded;   
  }

  .today {
    @apply bg-red-600 text-white;

    div {
      @apply text-white border-white/20;
    }

    div a {
      @apply text-white;
    }
  }

  .prev-month, .next-month {
    @apply text-gray-400 bg-gray-50;
  }

  .has-events {
    div + div {
      @apply mt-1;
    }
  }

  .calendar-heading {
    @apply py-5 flex;

    .calendar-title {
      @apply text-xl font-bold text-left flex-auto;
    }
  }

  @media (max-width: 768px) {
    th {
      @apply hidden;
    }

    tr {
      @apply flex flex-col;
    }

    td {
      @apply w-full;
    }

    .day {
      @apply hidden h-auto;

      &.has-events {
        @apply inline-block;
      }

      &.prev-month {
        @apply hidden;
      }
    }
  }
}

.card-registration {
  @apply max-w-md mx-auto bg-white shadow-sm border px-8 py-10 rounded;
}
.bg-team-red {
  @apply bg-red-600;
}

.bg-team-orange {
  @apply bg-orange-600;
}

.bg-team-amber {
  @apply bg-amber-600;
}

.bg-team-yellow {
  @apply bg-yellow-500;
}

.bg-team-lime {
  @apply bg-lime-600;
}

.bg-team-green {
  @apply bg-green-600;
}

.bg-team-emerald {
  @apply bg-emerald-600;
}

.bg-team-cyan {
  @apply bg-cyan-600;
}

.bg-team-sky {
  @apply bg-sky-600;
}

.bg-team-blue {
  @apply bg-blue-600;
}

.bg-team-indigo {
  @apply bg-indigo-600;
}

.bg-team-violet {
  @apply bg-violet-600;
}

.bg-team-purple {
  @apply bg-purple-600;
}

.bg-team-fuchsia {
  @apply bg-fuchsia-600;
}

.bg-team-pink {
  @apply bg-pink-600;
}

.bg-team-rose {
  @apply bg-rose-600;
}

.bg-team-slate {
  @apply bg-slate-600;
}

.bg-team-gray {
  @apply bg-gray-600;
}

.bg-team-zinc {
  @apply bg-zinc-600;
}

.bg-team-neutral {
  @apply bg-neutral-600;
}

.bg-team-stone {
  @apply bg-stone-600;
}

.bg-team-black {
  @apply bg-black;
}

.bg-team-white {
  @apply bg-white;
}

.radio-group {
  @apply isolate inline-flex rounded-md;

  label {
    @apply text-xs border border-rose-500 px-3 py-2 text-rose-500 hover:text-rose-400 hover:z-20 rounded-none transition-all ease-in-out;
    @apply inline-flex items-center focus:z-10 rounded-none cursor-pointer !important;
   
    &:not(:first-child) {
      @apply -ml-px;
    }

    &:first-child {
      @apply rounded-l-md !important;
    }

    &:last-child {
      @apply rounded-r-md !important;
    }
    
    &:has(input:checked) {
      @apply text-white bg-rose-600 border-rose-500 z-10 !important;
    }
  }
}

.radio-group-checkin {
  @apply isolate inline-flex rounded-md;

  label {
    @apply text-xs border border-rose-500 px-3 py-2 text-rose-500 hover:text-rose-300 hover:z-20 rounded-none transition-all ease-in-out;
    @apply inline-flex items-center focus:z-10 rounded-none cursor-pointer !important;
   
    &:not(:first-child) {
      @apply -ml-px;
    }

    &:first-child {
      @apply rounded-l-md !important;
    }

    &:last-child {
      @apply rounded-r-md !important;
    }
    
    &:has(input:checked) {
      @apply text-white bg-rose-600 border-rose-500 z-10 !important;
    }
  }
}
@font-face {
    font-family: 'Chillax-Extralight';
    src: url(/assets/Chillax-Extralight-7f7fecf1dd5febec0c2a5b1ba0b0d9e6566a9e819025173ca831b7c4d7cb90d7.woff2) format('woff2'),
         url(/assets/Chillax-Extralight-79bbcac7b86a05e2719cf6a5667239d0676ec69e169e42fe63abe717199d5c29.woff) format('woff'),
         url(/assets/Chillax-Extralight-67d2da5c4f7409a0b0cad4846443cca12c1dd31c0a4f9b4f4e2c99ef3608dd10.ttf) format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'Chillax-Light';
    src: url(/assets/Chillax-Light-0207126ed53c9368b25f33bc647b592edb8e04b4d92d7177d30ffeaade867ad8.woff2) format('woff2'),
         url(/assets/Chillax-Light-b9489947116ea72dac0eb6a4a0dac179f6fa9369f469551ad33bcf13e34a2f26.woff) format('woff'),
         url(/assets/Chillax-Light-056ca0f4c3188fcbc1d982a4a9645a7104ecfe78009665740d134f8ac8162a6f.ttf) format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'Chillax-Regular';
    src: url(/assets/Chillax-Regular-73b72f5f77d0eec32f88fbfaa7949e65a69315a5bec56b518b53f86d6fa20061.woff2) format('woff2'),
         url(/assets/Chillax-Regular-7067381891d6831853f2dc5093243b0f7663ddd6d368bb23ef2e073374aa1be6.woff) format('woff'),
         url(/assets/Chillax-Regular-ae28e5315391ccffd992b8e1761cdc6941c80d2add2a584092d76dbe38db4e35.ttf) format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'Chillax-Medium';
    src: url(/assets/Chillax-Medium-d9407c0cb5c0f53f4a6ce89e3f5a991a3ac1393d554793fce9dce9d3dc3c1d54.woff2) format('woff2'),
         url(/assets/Chillax-Medium-5ac9671e7aa10f1847bf85eeed3c7a63bcea4a5ac5165d06823918684fd78c7f.woff) format('woff'),
         url(/assets/Chillax-Medium-2d9ab6c35594bf9665801974cf5ba28038a3bfb98b4fe3dd987922cddae7e291.ttf) format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'Chillax-Semibold';
    src: url(/assets/Chillax-Semibold-85559bd63ed1506be95ed4463a5c5381db78c0b228eb2afd57e109987ec82ca9.woff2) format('woff2'),
         url(/assets/Chillax-Semibold-d5b2db6cdf8319c5ce02aae28060bd835c1657d3e56e255c11dac6f390b085de.woff) format('woff'),
         url(/assets/Chillax-Semibold-845f6783032b6f1a9fdc5d4be28c973e3eab1ab7c8aa6efa022b8a90df421752.ttf) format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'Chillax-Bold';
    src: url(/assets/Chillax-Bold-f53037b7e04bef2f4d02fe026d2387e7c66582d09ecd8c75cddb441da1c5c759.woff2) format('woff2'),
         url(/assets/Chillax-Bold-fd3f4eea3f2aa968c2b063148991485a9ab00389d8941971d8393bde22312091.woff) format('woff'),
         url(/assets/Chillax-Bold-5854e6dff0731aace4508dedc3540add91285642c3c4d84acbde43e2f5ffd879.ttf) format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
  }
  
  .Chillax-Bold {
    font-family: 'Chillax-Bold', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
/*
 * 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.
 *


 */