@import "tailwindcss";
@import '@angular/cdk/overlay-prebuilt.css';
@custom-variant theme-dark (&:where([data-theme="dark"] *));
@custom-variant theme-hacker (&:where([data-theme="hacker"] *));

html, body, .app-container {
  font-size: 14px;
  height: 100%;
  text-align: left;
  line-height: 1.3;
  letter-spacing: -0.025em;

  background-color: var(--color-bg);
  color: var(--color-primary);
}

app-root * {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* VIDEO.JS */

::ng-deep .video-js .vjs-control-bar {
  background: linear-gradient(to top, rgba(43, 51, 63, 0.7), transparent);
}
::ng-deep .video-js > .vjs-remaining-time {
  height: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 0.75rem;
  font-family: 'Inter', sans-serif;
  opacity: 0;
}
::ng-deep .video-js.vjs-user-inactive .vjs-remaining-time {
  height: 2rem;
  opacity: 1;
  transition: 1.5s opacity ease;
}

@theme {
  --font-mono: "Source Code Pro", monospace;
  --font-sans: "Source Code Pro", sans-serif;

  --text-sm: 0.9285rem;

  --color-bg: #FFF;
  --color-primary: #000;
  --color-secondary: #E1E1E1;
  --color-repost: #00aa00;
  --color-like: #F00000;
  --color-selection-bg: rgba(0, 0, 0, 0.99);
  --color-selection-text: #FFF;
  --color-background: #FFF;
  --color-text: var(--color-base);
  --color-placeholder: var(--color-base);
  --color-link: var(--color-base);
  --color-code-1: #aaaaaa;
  --color-code-2: #ffffcc;
  --color-code-3: #F00000;
  --color-code-4: #F0A0A0;
  --color-code-5: #0000aa;
  --color-code-6: #4c8317;
  --color-code-7: #aa0000;
  --color-code-8: #000080;
  --color-code-9: #00aa00;
  --color-code-10: #888888;
  --color-code-11: #555555;
  --color-code-12: #800080;
  --color-code-13: #00aaaa;
  --color-code-14: #009999;
  --color-code-15: #aa5500;
  --color-code-16: #1e90ff;
  --color-code-17: #800000;
  --color-code-18: #bbbbbb;
}

@custom-variant midnight {
  &:where([data-theme="midnight"] *) {
    --color-base: #DBDBDB;
    --border: dashed 1px rgba(219, 219, 219, 0.9);
    --color-selection-bg: rgba(219, 219, 219, 0.99);
    --color-selection-text: #000;
    --color-background: #000;
    --color-text: var(--color-base);
    --color-placeholder: var(--color-base);
    --color-link: var(--color-base);
    --color-code-1: #aaaaaa;
    --color-code-2: #ffffcc;
    --color-code-3: #F00000;
    --color-code-4: #F0A0A0;
    --color-code-5: #b38aff;
    --color-code-6: #5ba711;
    --color-code-7: #e4e477;
    --color-code-8: #000080;
    --color-code-9: #05ca05;
    --color-code-10: #888888;
    --color-code-11: #555555;
    --color-code-12: #800080;
    --color-code-13: #00d4d4;
    --color-code-14: #00c1c1;
    --color-code-15: #ed9d13;
    --color-code-16: #1e90ff;
    --color-code-17: #800000;
    --color-code-18: #bbbbbb;
  }
}

@custom-variant hacker {
  &:where([data-theme="hacker"] *) {
    --color-base: #00ff00;
    --border: dashed 1px rgba(0, 255, 0, 0.9);
    --color-selection-bg: rgba(0, 255, 0, 0.99);
    --color-selection-text: #000;
    --color-background: #000;
    --color-text: var(--color-base);
    --color-placeholder: var(--color-base);
    --color-link: var(--color-base);
    --color-code-1: #aaaaaa;
    --color-code-2: #ffffcc;
    --color-code-3: #F00000;
    --color-code-4: #F0A0A0;
    --color-code-5: #b38aff;
    --color-code-6: #5ba711;
    --color-code-7: #e4e477;
    --color-code-8: #000080;
    --color-code-9: #05ca05;
    --color-code-10: #888888;
    --color-code-11: #555555;
    --color-code-12: #800080;
    --color-code-13: #00d4d4;
    --color-code-14: #00c1c1;
    --color-code-15: #ed9d13;
    --color-code-16: #1e90ff;
    --color-code-17: #800000;
    --color-code-18: #bbbbbb;
  }
}

@layer components {
  .btn-primary {
    box-sizing: border-box;
    border: 1px solid;
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-bg);
    width: fit-content;
    text-box: trim-both cap alphabetic;
    padding: 0.5em 0.75em;
    cursor: pointer;
    min-height: 2em;

    &:hover {
      background-color: var(--color-bg);
      color: var(--color-primary);
    }

    &:disabled {
      pointer-events: none;
      opacity: 0.3;
    }
  }

  .btn-secondary {
    box-sizing: border-box;
    border: 1px solid;
    border-color: var(--color-primary);
    background-color: var(--color-bg);
    color: var(--color-primary);
    width: fit-content;
    text-box: trim-both cap alphabetic;
    padding: 0.5em 0.75em;
    cursor: pointer;
    min-height: 2em;

    &.active {
      background-color: color-mix(in oklab, var(--color-primary) /* #000 = #000000 */ 5%, transparent);
      color: var(--color-primary);
    }

    &:hover {
      background-color: color-mix(in oklab, var(--color-primary) /* #000 = #000000 */ 10%, transparent);
      color: var(--color-primary);
    }

    &:disabled {
      pointer-events: none;
      opacity: 0.3;
    }
  }

  .btn-dropdown {
    box-sizing: border-box;
    background-color: var(--color-bg);
    color: var(--color-primary);
    width: 100%;
    text-align: left;
    font-family: var(--font-mono);
    padding: 0.5em 0.75em;
    cursor: pointer;

    &:hover {
      background-color: var(--color-primary);
      color: var(--color-bg);
    }

    &:disabled {
      pointer-events: none;
    }

    &:focus-visible {
      outline: none;
      background-color: var(--color-primary);
      color: var(--color-bg);
    }
  }
}