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

::-webkit-scrollbar {
  display: flex;
  height: 0.25rem;
  width: 0.25rem;
  border-radius: 0.5rem;
  background-color: rgb(221 226 232 / var(--tw-bg-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 160ms;
  @apply dark:bg-neutral-850;
}

::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background-color: var(--primary-medium);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
  @apply bg-opacity-30 hover:bg-brand-medium hover:bg-opacity-100;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

@layer base {
  :root {
    --primary-default: #0464fb;
    --primary-light: #b4d0fe;
    --primary-medium: #0350c9;
    --primary-medium-dark: #023c97;
    --primary-dark: #011e4b;
    /* Fallback variables to set the height of the titlebar based on OS */
    --oplc-title-bar-height: 2rem;
    --fallback-darwin-title-bar-height: 1.75rem;
    --radix-popper-transform-origin: 100% 0px;
  }

  /* This can be useful to allocate the main container */

  #folder-root p:hover ~ svg #folder-path {
    fill: var(--primary-medium-dark);
  }

  button {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
}

@layer components {
  .box {
    @apply border border-brand-light shadow-oplc dark:border-brand-medium-dark dark:shadow-oplc-dark;
  }
  /* Classes for the custom titlebar*/
  .oplc-titlebar-container {
    position: absolute;
    top: 0;
    width: 100%;
    height: var(--oplc-title-bar-height);
  }

  .oplc-titlebar-content {
    position: absolute;
    top: 0;
    display: flex;
    user-select: none;
    height: 100%;
    background-color: var(--primary-dark);
    left: 0;
    width: 100%;
  }

  .oplc-titlebar-drag-region {
    app-region: drag;
  }

  .oplc-main-content {
    position: absolute;
    display: flex;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--oplc-title-bar-height);
    overflow: hidden;
  }
  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
  input[type='number'] {
    appearance: textfield;
  }
}

@layer utilities {
  .press-animated {
    @apply border-[none] transition-[0.2s] duration-[all] active:scale-[0.90];
  }

  .no-drag-window {
    -webkit-app-region: no-drag;
  }
}

.apexcharts-yaxis-label tspan,
.apexcharts-xaxis-label tspan {
  @apply fill-neutral-1000 !text-[10px] dark:fill-neutral-50;
}

@keyframes spin-refresh {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spin-refresh {
  animation: spin-refresh 0.5s linear;
}
