@import "./slider.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /** fonts */
  :root {
    --header-height: 43px;
    --toolbar-height: 36px;
    --footer-height: 32px;
  }

  @font-face {
    font-family: "Euclid Circular B";
    font-style: normal;
    src: url("/fonts/EuclidCircularB-Regular.woff") format("woff");
    font-weight: 400;
    font-display: optional;
  }

  @font-face {
    font-family: "Euclid Circular B";
    font-style: normal;
    src: url("/fonts/EuclidCircularB-Bold.woff") format("woff");
    font-weight: 700;
    font-display: optional;
  }

  @font-face {
    font-family: "Euclid Circular B";
    font-style: normal;
    src: url("/fonts/EuclidCircularB-Light.woff") format("woff");
    font-weight: 300;
    font-display: optional;
  }

  @font-face {
    font-family: "Euclid Circular B";
    font-style: normal;
    src: url("/fonts/EuclidCircularB-Medium.woff") format("woff");
    font-weight: 500;
    font-display: optional;
  }

  @font-face {
    font-family: "Euclid Circular B";
    font-style: normal;
    src: url("/fonts/EuclidCircularB-Semibold.woff") format("woff");
    font-weight: 600;
    font-display: optional;
  }

  * {
    @apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-600;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-title;
  }
}

@layer components {
  /**
   * SplitPane specific CSS (split.js)
  **/
  .gutter {
    border: 0px;
    min-width: 1.5px;
    width: 1px !important;
    z-index: 1;
    @apply cursor-col-resize bg-slate-800;
    transition: 120ms ease;
  }

  .gutter:hover {
    width: 5px !important;
    border: 10px;
    @apply cursor-col-resize bg-slate-700;
  }

  .gutter:active {
    @apply bg-slate-400;
  }

  /**
   * /SplitPane specific CSS (split.js)
  **/

  /**
   * Background classes
  **/
  .surf-container {
    @apply overflow-hidden absolute inset-0 w-full h-full -z-10;
  }

  .bg-surface {
    @apply relative opacity-30 scale-110;

    filter: blur(32px);
    height: 170%;
    width: 160%;
    max-height: 90vh;
    top: -250px;
  }

  /**
   * /Background classes
  **/

  /**
   * shiki
   * 
  **/
  .shiki {
    padding: 1.5em;
    max-width: 85vw;
    text-wrap: normal;
    min-height: 100%;
    height: max-content;
    width: max-content;
    background: transparent !important;
    /* override shiki's background */
  }

  code {
    counter-reset: step;
    counter-increment: step 0;
  }

  code .line::before {
    content: counter(step);
    counter-increment: step;
    width: 1rem;
    margin-right: 1.5rem;
    display: inline-block;
    text-align: right;
    color: rgba(115, 138, 148, 0.4);
    user-select: none;
  }

  /**
   * /shiki
  **/
}

.select-none {
  user-select: none;
}

::selection {
  background: rgb(0, 66, 104);
}

#tauri-config-0-pane {
  min-width: 250px;
}
