@import 'ui/progress/animation.css';
@import 'ui/skeleton/skeleton.css';
@import 'ui/layout/dashbboard-layout.css';
@import 'text-editor/editor-styles.css';
@import 'admin/ads/ad-host.css';
@import 'player/player-styles.css';

@layer base {
  html,
  body,
  #root {
    @apply w-full h-full antialiased;
  }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  #root {
    @apply text-main bg;
  }

  .dark ::-webkit-scrollbar {
    max-height: 10px;
    max-width: 10px;
    width: auto;
  }

  .dark ::-webkit-scrollbar-corner,
  .dark ::-webkit-scrollbar-track {
    background: #2a2a2a;
  }

  .dark ::-webkit-scrollbar-thumb {
    background: #5a5a5a;
    border: 1px solid #2a2a2a;
    border-radius: 10px;
  }

  .dark * {
    scrollbar-width: thin;
    scrollbar-color: #5a5a5a #2a2a2a;
  }

  .dark .compact-scrollbar::-webkit-scrollbar-thumb {
    background: #5a5a5a;
  }

  .compact-scrollbar::-webkit-scrollbar {
    max-height: 6px;
    max-width: 6px;
    width: auto;
  }

  .compact-scrollbar::-webkit-scrollbar-corner,
  .compact-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .compact-scrollbar::-webkit-scrollbar-thumb {
    background: rgb(193 193 193);
    border: none;
    border-radius: 10px;
  }

  .compact-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgb(193 193 193) transparent;
  }

  .hidden-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

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

  .stable-scrollbar {
    scrollbar-gutter: stable;
  }

  .diagonal-lines {
    background: linear-gradient(
        to top left,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) calc(50% - 1px),
        rgba(239, 68, 68, 0.4) 50%,
        rgba(0, 0, 0, 0) calc(50% + 1px),
        rgba(0, 0, 0, 0) 100%
      ),
      linear-gradient(
        to top right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) calc(50% - 1px),
        rgba(239, 68, 68, 0.4) 50%,
        rgba(0, 0, 0, 0) calc(50% + 1px),
        rgba(0, 0, 0, 0) 100%
      );
  }

  .svg-image-container svg {
    width: inherit;
    height: inherit;
    max-width: 100%;
  }

  .no-page-overflow {
    overflow: hidden;
  }
  .no-page-overflow body {
    overflow: hidden;
  }
  .no-page-overflow #root {
    overflow: hidden;
  }
}