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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@layer utilities {
  .animate-slide-down {
    animation: slideDown 0.3s ease-in-out;
  }

  /* Hide scrollbar while keeping scroll functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

html {
  scroll-behavior: smooth;
}

/* disable smooth scroll in timelines with slider */
html.no-smooth-scroll {
  scroll-behavior: auto !important;
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-y: scroll;
}

.mobile-full-bleed {
  @apply ml-[-16px] mr-[-16px] w-[calc(100%+32px)] sm:ml-[-48px] sm:mr-[-48px] sm:w-[calc(100%+96px)] lg:ml-0 lg:mr-0 lg:w-auto;
}

/* FONTS */
@layer components {
  .type-eyebrow {
    @apply text-xs uppercase tracking-l;
  }

  .type-section-title {
    @apply text-3xl sm:text-4xl lg:text-5xl leading-tight font-semibold uppercase;
  }

  .type-section-desc {
    @apply text-base sm:text-lg;
  }
}
/* end of FONTS */

@layer components {
  .t-label {
    @apply text-sm sm:text-base tracking-m font-semibold;
  }

  .t-helper {
    @apply text-sm leading-relaxed;
  }

  .t-caption {
    @apply text-xs sm:text-sm tracking-s;
  }

  .tone-muted {
    @apply text-[#151720]/70;
  }

  .tone-soft {
    @apply text-[#151720]/50;
  }

  .stack-sm {
    @apply space-y-2;
  }

  .stack-md {
    @apply space-y-4;
  }

  .stack-lg {
    @apply space-y-6;
  }

  .event-submit .field-wrapper {
    @apply space-y-4;
  }

  .event-submit .field-label {
    @apply t-label tone-muted;
  }

  .event-submit .field-required-note {
    @apply t-caption tone-soft;
  }

  .event-submit .field-helper {
    @apply t-helper tone-muted;
  }

  .event-submit .event-submit-fields input:not([type='radio']):not([type='checkbox']) {
    @apply h-11 border-[#151720]/25 bg-white text-[#151720] placeholder:text-[#151720]/40 focus-visible:ring-[#151720]/60;
  }

  .event-submit .event-submit-fields textarea {
    @apply border-[#151720]/25 bg-white text-[#151720] placeholder:text-[#151720]/40 focus-visible:ring-[#151720]/60;
  }

  .event-submit .event-submit-fields button[role='combobox'] {
    @apply border-[#151720]/20 bg-white text-[#151720] shadow-none;
  }

  .event-submit .event-submit-fields .date-picker-trigger {
    @apply border-[#151720]/20 bg-white text-[#151720] shadow-none;
  }

  .event-submit .event-submit-fields select {
    @apply border-[#151720]/25 bg-white text-[#151720];
  }

  .event-submit .field-wrapper.has-error input:not([type='radio']):not([type='checkbox']),
  .event-submit .field-wrapper.has-error textarea,
  .event-submit .field-wrapper.has-error select,
  .event-submit .field-wrapper.has-error button[role='combobox'],
  .event-submit .field-wrapper.has-error .date-picker-trigger {
    @apply border-red-500 ring-1 ring-red-500/40;
  }

  .event-submit .event-submit-fields input[type='checkbox'],
  .event-submit .event-submit-fields input[type='radio'] {
    accent-color: #151720;
    @apply border-[#151720]/30;
  }

  .event-submit .event-submit-fields input[type='checkbox'] + label,
  .event-submit .event-submit-fields input[type='radio'] + label {
    @apply text-sm font-medium text-[#151720]/80;
  }

  .event-submit .creator-chip {
    @apply bg-[#151720] text-white uppercase tracking-s text-xs font-medium;
  }

  .event-submit .creator-results {
    @apply border-[#151720]/10 shadow-[0_20px_60px_-45px_rgba(20,25,40,0.35)];
  }

  .event-submit .creator-result-item {
    @apply transition-colors;
  }

  .ui-panel {
    @apply border border-[#151720]/10 bg-white/95 shadow-[0_30px_80px_-60px_rgba(20,25,40,0.35)];
  }

  .ui-card {
    @apply border border-[#151720]/10 bg-white shadow-[0_24px_60px_-50px_rgba(20,25,40,0.35)];
  }

  .ui-card-interactive {
    @apply transition hover:border-[#151720]/25 hover:bg-[#151720]/[0.04] hover:shadow-[0_26px_55px_-40px_rgba(20,25,40,0.4)];
  }

  .ui-meta {
    @apply text-[11px] font-semibold uppercase tracking-m text-[#151720]/65;
  }

  .ui-title-sm {
    @apply text-[15px] font-semibold leading-tight text-[#151720];
  }

  .ui-chip {
    @apply inline-flex px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-s;
  }

  .ui-chip-outline {
    @apply inline-flex border border-[#151720]/30 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-s text-[#151720]/75;
  }

  .ui-control {
    @apply border border-[#151720]/25 bg-white text-[#151720] hover:bg-[#151720]/10;
  }

  .ui-control-label {
    @apply uppercase tracking-m text-[11px] font-semibold;
  }

  .ui-control-active {
    @apply border border-[#151720]/40 bg-[#151720] text-white hover:bg-[#151720]/85;
  }

  .ui-control-inactive {
    @apply border border-[#151720]/25 bg-white text-[#151720]/75 hover:bg-[#151720]/10;
  }
}

.px-site {
  @apply px-4 sm:px-12 lg:px-20 2xl:px-36;
}

.px-site-timeline {
  @apply pl-4 sm:px-12 lg:px-20 2xl:px-36;
}

.px-site-list {
  @apply px-0 sm:px-12 lg:px-20 2xl:px-36;
}

.p-left-site-list-slider {
  @apply pl-0 sm:pl-12 lg:pl-20 2xl:pl-36;
}

.p-right-site-list-slider {
  @apply pr-0 sm:pr-12 lg:pr-20 2xl:pr-36;
}

.py-site {
  @apply py-4 lg:py-24 2xl:py-36;
}

.py-page {
  @apply py-4 sm:py-8;
}

.pt-page {
  @apply pt-4;
}

.pb-page {
  @apply pb-4 sm:pb-8;
}

.bg-white-glass {
  @apply bg-white/90 backdrop-blur-sm;
}

.bg-image-load {
  @apply bg-black/10;
}

.creator-component-size {
  @apply w-full aspect-square sm:aspect-[16/9] xl:aspect-[16/6];
}

.content-text h1,
.content-text h2,
.content-text h3,
.content-text h4,
.content-text h5,
.content-text h6,
.content-text ul {
  @apply my-6 first:mt-0 last:mb-0;
}

.content-text p {
  @apply mb-3 first:mt-0 last:mb-0;
}

.content-text a {
  @apply font-bold underline underline-offset-2 text-mma-blue hover:text-mma-yellow transition-colors;
}

.content-text table {
  /* table-layout: fixed; */
  /* word-break: break-all ; */
  @apply my-6 w-full;
}

.content-text table td,
th {
  @apply border border-neutral-200 p-2 sm:p-6 text-xs sm:text-base;
}

.content-text td {
  /* display: -webkit-box;
  word-break: break-word; */
}

.content-text ol {
  @apply list-decimal list-inside;
}

.content-text ul {
  @apply list-disc list-inside;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track-piece {
  background-color: #eeeeee;
}

::-webkit-scrollbar-thumb {
  background-color: #a0a0a0;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #787878;
}

.react-horizontal-scrolling-menu--scroll-container::-webkit-scrollbar {
  display: none;
}

.react-horizontal-scrolling-menu--scroll-container {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/* Hide scrollbars but keep scrollable behavior */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.youtube-play-button {
  background: #ff0033;
  border-radius: 50% / 10%;
  color: white;
  font-size: 12px; /* change only this to change size */
  height: 3em;
  padding: 0;
  position: absolute;
  text-align: center;
  text-indent: 0.1em;
  transition: all 150ms ease-out;
  width: 4em;
  top: 50%;
  left: 50%;

  @apply -translate-x-1/2 -translate-y-1/2;
}

.youtube-play-button::before {
  background: inherit;
  border-radius: 5% / 50%;
  bottom: 9%;
  content: '';
  left: -5%;
  position: absolute;
  right: -5%;
  top: 9%;
}

.youtube-play-button::after {
  border-style: solid;
  border-width: 1em 0 1em 1.732em;
  border-color: transparent transparent transparent white;
  content: ' ';
  font-size: 0.75em;
  height: 0;
  margin: -1em 0 0 -0.75em;
  top: 50%;
  position: absolute;
  width: 0;
}

.yt-lite:hover > .youtube-play-button {
  @apply bg-[#9b0714];
}

.clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-height: 128px;
  line-break: after-white-space;
  text-overflow: ellipsis;

  * {
    display: inline;
  }
}

.clamped > p {
  margin-bottom: 0;
}

/* yet-another-react-lightbox: enlarge desktop navigation arrows */
@media (min-width: 1280px) {
  .yarl__navigation_next {
    padding-right: 0 !important;
  }

  .yarl__navigation_prev {
    padding-left: 0 !important;
  }

  .yarl__navigation_next .yarl__icon,
  .yarl__navigation_prev .yarl__icon {
    /* make arrow glyph bigger */
    width: 72px;
    height: 72px;
  }
}

.yarl__thumbnails_thumbnail_active {
  border: 4px solid #dfcf6f !important;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;

    /* temp-duplicated list */
    --brand-primary: 229.09 20.75% 10.39%;
    --brand-secondary: 0 0% 100%;

    --brand-mma-blue: 231.72 19.73% 28.82%;
    --brand-mma-yellow: 51.43 63.64% 65.49%;
    --brand-mma-cyan: 184.86 35.24% 79.41%;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}