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

@layer components {
  .pixel-card {
    background: #fff;
    border: 2px solid #0f172a;
    box-shadow: 4px 4px 0px 0px #0f172a;
  }

  .pixel-btn {
    @apply font-mono font-bold uppercase text-xs tracking-widest px-3 py-1.5 border-2 border-slate-900 bg-white text-slate-900 cursor-pointer;
    box-shadow: 2px 2px 0px 0px #0f172a;
    transition: box-shadow 0.05s, transform 0.05s;

    &:hover {
      box-shadow: none;
      transform: translate(2px, 2px);
    }
  }

  .pixel-badge {
    @apply font-mono text-xs font-bold uppercase tracking-widest border-2 border-slate-900 px-2 py-0.5;
  }

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

.font-mono {
  @apply tracking-tight; 
  font-weight: 700;
  -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"],
input[type="number"],
input[type="tel"],
input[type="color"],
select,
textarea,
.select {
  @apply px-3 py-2 w-full appearance-none border-2 border-slate-900/30 bg-white font-mono text-sm placeholder:text-slate-400 focus:border-slate-900 focus:outline-none focus:ring-0;
  border-radius: 0 !important;
}

textarea {
  resize: none;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: rgba(15, 23, 42, 0.3) !important;
}

textarea:focus {
  border-color: #0f172a !important;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230f172a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

input[type="checkbox"] {
  @apply appearance-none border-2 border-slate-900/30 bg-white p-2 focus:outline-none focus:ring-0;
  border-radius: 0;
}

input[type="checkbox"]:checked {
  @apply bg-slate-900 border-slate-900;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

label, .label {
  @apply inline-block font-mono text-xs font-black uppercase tracking-widest text-slate-700 mb-2;
}

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

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

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

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

.button,
.button--primary,
.button--secondary,
.button--danger,
.button--danger-secondary,
.button--not-ready {
  @apply px-3 py-1.5 text-xs font-mono font-black uppercase tracking-widest pointer-events-auto truncate cursor-pointer relative text-center border-2;
  transition: box-shadow 0.05s ease, transform 0.05s ease;
}

.button--primary:hover,
.button--secondary:hover,
.button--danger:hover,
.button--danger-secondary:hover,
.button--not-ready:hover,
.button:hover {
  box-shadow: none !important;
  transform: translate(2px, 2px);
}

.button--primary:hover { color: white; }
.button--secondary:hover { color: #0f172a; }
.button--danger:hover { color: white; }
.button--danger-secondary:hover { color: #e11d48; }
.button:hover { color: #0f172a; }

.button {
  @apply bg-white text-slate-900 border-slate-900;
  box-shadow: 2px 2px 0px #0f172a;
}

.button--primary {
  @apply text-white bg-blue-600 border-blue-900;
  box-shadow: 2px 2px 0px #1e3a8a;
}

.button--secondary {
  @apply text-slate-900 bg-white border-slate-900;
  box-shadow: 2px 2px 0px #0f172a;
}

.button--danger {
  @apply text-white bg-rose-600 hover:bg-rose-700 border-rose-900;
  box-shadow: 2px 2px 0px #881337;
}

.button--danger-secondary {
  @apply text-rose-600 bg-white hover:bg-rose-50 border-rose-500;
  box-shadow: 2px 2px 0px #f43f5e;
}

.button--not-ready {
  @apply bg-transparent hover:bg-transparent border-slate-300 text-slate-400 hover:text-slate-400;
  box-shadow: 2px 2px 0px #cbd5e1;
}


.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 px-4 py-3 text-center text-sm font-mono font-black uppercase tracking-widest border-b-2;
}

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

.flash-danger {
  @apply border-red-900 bg-red-600 text-white;
}

.flash-success {
  @apply border-emerald-900 bg-emerald-600 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 border-2 border-slate-900 px-2.5 py-1 font-mono font-black text-xs uppercase tracking-widest text-slate-900 transition-colors no-underline;
  border-radius: 0;
}

.simple-calendar nav a:not(:first-child) {
  @apply -ml-px;
}

.simple-calendar nav a:hover {
  @apply bg-slate-900 text-white;
}

.simple-calendar table {
  @apply w-full max-w-full border-collapse;
  -webkit-border-horizontal-spacing: 0;
  -webkit-border-vertical-spacing: 0;
}

.simple-calendar tr {
  @apply border-collapse;
}

.simple-calendar th {
  @apply p-2 border-2 border-slate-900 bg-slate-900 text-white text-left text-xs font-mono font-black uppercase tracking-widest;
}

.simple-calendar td {
  @apply p-1.5 border-2 border-slate-900 align-top bg-white;
  width: 14.28%;
}

.simple-calendar .day {
  @apply h-[10vh] w-[14.28%];
}

.simple-calendar .today {
  @apply bg-white;
  border-left: 4px solid #dc2626 !important;
}

.simple-calendar .prev-month,
.simple-calendar .next-month {
  @apply bg-gray-50 opacity-50;
}

.simple-calendar .calendar-heading {
  @apply py-4 flex items-center gap-4;
}

.simple-calendar .calendar-title {
  @apply text-lg font-mono font-black uppercase tracking-widest text-slate-900 flex-auto;
}

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

  .simple-calendar tr {
    @apply flex flex-col;
  }

  .simple-calendar td {
    @apply w-full;
  }

  .simple-calendar .day {
    @apply hidden;
    min-height: auto;
  }

  .simple-calendar .day.has-events {
    @apply block;
  }

  .simple-calendar .day.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;
}

.color-picker label:has(input:checked) > div {
  outline: 3px solid #0f172a;
  outline-offset: 3px;
}

.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 w-full font-mono;

  label {
    @apply text-xs border-2 border-slate-900 px-3 py-2 text-slate-500 hover:text-slate-900 hover:bg-slate-100 hover:z-20 transition-all ease-in-out flex-1 text-center font-black uppercase tracking-widest;
    @apply inline-flex items-center justify-center focus:z-10 cursor-pointer !important;

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

    &:first-child {
      &:has(input:checked) {
        @apply text-white bg-emerald-600 border-emerald-700 z-10 !important;
      }
    }

    &:nth-child(2) {
      &:has(input:checked) {
        @apply text-white bg-amber-500 border-amber-700 z-10 !important;
      }
    }

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

/* Flip card */
.flip-card-inner {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.flip-card-inner.is-flipped {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-card-back {
  transform: rotateY(180deg);
  pointer-events: none;
}
.flip-card-inner.is-flipped .flip-card-back {
  pointer-events: auto;
}
.flip-card-inner.is-flipped .flip-card-front {
  pointer-events: none;
}
@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;
  }
@import url("https://rsms.me/inter/inter.css");
/*
 * 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.
 *


 */