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



@layer base {
  @font-face {
    font-family: ZuumeCut-Bold;
    font-weight: 700;
    src: url(/assets/ZuumeCut-Bold-3490b06006fc95e9628edf772d845c5bc89c733568dd978aed33cd2223c137b8.otf) format('opentype');
  }
  @font-face {
    font-family: ZuumeCut-SemiBold;
    font-weight: 500;
    src: url(/assets/ZuumeCut-SemiBold-7b923ea99d94f7d8ff9a9b4785bccc74296ea5da13457834faf473465617eda1.otf) format('opentype');
  }
  @font-face {
    font-family: ZuumeCut-Light;
    font-weight: 100;
    src: url(/assets/ZuumeCut-Light-ad6842479d6809d54a4975ab65bb08a9a93986268dc15a7f153b13ff5452486e.otf) format('opentype');
  }
}

/*

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

*/


.stats-grid .item-left {
  @apply w-3/12 text-right pr-12 py-6point5  my-2point5 mb-2
}

.stats-grid .item-right {
  @apply w-3/12 py-6point5 my-2point5 w-3/12 text-left pl-12
}

.time-on-ice .player {
  @apply w-[282px] text-2xl5 pt-5 pb-5 mb-0.5 uppercase leading-6
}

.time-on-ice .home-player {
  @apply pl-12 text-left
}

.time-on-ice .away-player {
  @apply pr-12 text-right
}

.time-on-ice .time {
  @apply text-4xl font-bold w-[124px]
}

.time-on-ice .home-time {
  @apply pr-2 text-right 
}

.time-on-ice .away-time {
  @apply pl-2 text-left ml-[84px]
}
/*
 * 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.
 *


 */

 .ts-wrapper {
    @apply w-full !ml-0;
  }
  
  .ts-control {
    @apply
      shadow-sm
      rounded-lg
      border-gray-300
      bg-white
      py-2
      px-3
      text-base;
  
      /* Add caret https://github.com/orchidjs/tom-select/discussions/384 */
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
      background-position: right 0.5rem center;
      background-repeat: no-repeat;
      background-size: 1.5em 1.5em;
  }
  
  .ts-dropdown {
    @apply rounded-md border border-solid border-t border-gray-300 text-base;
  }
  
  .ts-dropdown [data-selectable].option:first-child {
    @apply rounded-t-lg;
  }
  
  .ts-dropdown [data-selectable].option:last-child {
    @apply rounded-b-lg;
  }
  
  .ts-dropdown .create:hover, .ts-dropdown .option:hover{
    @apply bg-sky-50 text-sky-900;
  }
  
  .ts-dropdown .active {
    @apply bg-gray-100 text-gray-900;
  }