/* Auto-generated by Style Dictionary. Do not edit. */

@theme static {
  --color-basic-light: #FFFFFF;
  --color-basic-dark: #121212;
  --color-background_opacity: rgba(76, 85, 102, 0.80);
  --color-background_opacity-level_1: rgba(76, 85, 102, 0.50);
  --color-ia: #7E33E6;
  --color-ia-level_1: #8D49E9;
  --color-ia-level_2: #701CE3;
  --color-ia-default_10: rgba(126, 51, 230, 0.10);
  --color-ia-default_30: rgba(126, 51, 230, 0.30);
  --color-ia-gradient: linear-gradient(169deg, #CA33FF 0%, #334EFF 100%);
  --color-ia-gradient-level_1: linear-gradient(169deg, #D14DFF 0%, #4D64FF 100%);
  --color-ia-gradient-level_2: linear-gradient(169deg, #BD00FF 0%, #0022FF 100%);
  --color-ia-neutral-level_1: linear-gradient(169deg, rgba(202, 51, 255, 0.05) 0%, rgba(51, 78, 255, 0.05) 100%);
  --color-ia-neutral-level_2: linear-gradient(169deg, rgba(202, 51, 255, 0.1) 0%, rgba(51, 78, 255, 0.1) 100%);
  --color-ia-neutral-level_3: linear-gradient(169deg, rgba(202, 51, 255, 0.15) 0%, rgba(51, 78, 255, 0.15) 100%);
  --color-background: #FFFFFF;
  --color-background-level_1: #FAFAFB;
  --color-font: #1B102C;
  --color-font-level_1: rgba(27, 16, 44, 0.70);
  --color-font-level_2: rgba(27, 16, 44, 0.50);
  --color-neutral-level_1: rgba(27, 16, 44, 0.05);
  --color-neutral-level_2: rgba(27, 16, 44, 0.10);
  --color-neutral-level_3: rgba(27, 16, 44, 0.15);
  --color-brand: #7E33E6;
  --color-brand-default_30: rgba(126, 51, 230, 0.30);
  --color-brand-level_1: #8D49E9;
  --color-brand-level_2: #701CE3;
  --color-alert: #FFC01A;
  --color-alert-default_30: rgba(255, 192, 26, 0.30);
  --color-alert-level_1: #FFC733;
  --color-alert-level_2: #FFB900;
  --color-confirmation: #1A94FF;
  --color-confirmation-default_30: rgba(26, 148, 255, 0.30);
  --color-confirmation-level_1: #33A0FF;
  --color-confirmation-level_2: #0088FF;
  --color-success: #3BDDAD;
  --color-success-default_30: rgba(59, 221, 173, 0.30);
  --color-success-level_1: #51E1B7;
  --color-success-level_2: #26D9A4;
  --color-confirmation_alt: #3BDDAD;
  --color-confirmation_alt-default_30: rgba(59, 221, 173, 0.30);
  --color-confirmation_alt-level_1: #51E1B7;
  --color-confirmation_alt-level_2: #26D9A4;
  --color-danger: #F22727;
  --color-danger-default_30: rgba(242, 39, 39, 0.30);
  --color-danger-level_1: #F33F3F;
  --color-danger-level_2: #F00F0F;
  --font-family-body: 'Source Sans 3', sans-serif;
  --font-size-small-13: 13px;
  --font-size-normal-14: 14px;
  --font-size-big-16: 16px;
  --font-size-bigger-18: 18px;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --radius-tiny-2: 2px;
  --radius-small-3: 3px;
  --radius-normal-5: 5px;
  --radius-large-10: 10px;
  --radius-big-15: 15px;
  --shadow-1dp: 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 2px 1px 0px rgba(0,0,0,0.12), 0px 1px 3px 0px rgba(0,0,0,0.20);
  --shadow-2dp: 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 3px 1px 0px rgba(0,0,0,0.12), 0px 1px 5px 0px rgba(0,0,0,0.20);
  --shadow-3dp: 0px 3px 4px 0px rgba(0,0,0,0.14), 0px 3px 3px 0px rgba(0,0,0,0.12), 0px 1px 8px 0px rgba(0,0,0,0.20);
  --shadow-4dp: 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12), 0px 2px 4px 0px rgba(0,0,0,0.20);
  --shadow-6dp: 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12), 0px 3px 5px 0px rgba(0,0,0,0.20);
  --shadow-8dp: 0px 8px 10px 0px rgba(0,0,0,0.14), 0px 3px 14px 0px rgba(0,0,0,0.12), 0px 5px 5px 0px rgba(0,0,0,0.20);
  --shadow-12dp: 0px 12px 17px 0px rgba(0,0,0,0.14), 0px 5px 22px 0px rgba(0,0,0,0.12), 0px 7px 8px 0px rgba(0,0,0,0.20);
  --shadow-16dp: 0px 16px 24px 0px rgba(0,0,0,0.14), 0px 6px 30px 0px rgba(0,0,0,0.12), 0px 8px 10px 0px rgba(0,0,0,0.20);
  --shadow-24dp: 0px 24px 38px 0px rgba(0,0,0,0.14), 0px 9px 46px 0px rgba(0,0,0,0.12), 0px 11px 15px 0px rgba(0,0,0,0.20);
}

:root {
  --spacer-sp-extra-tiny: 5px;
  --spacer-sp-tiny: 10px;
  --spacer-sp-small: 15px;
  --spacer-sp-normal: 20px;
  --spacer-sp-normal-big: 25px;
  --spacer-sp-big: 30px;
  --spacer-sp-bigger: 40px;
  --spacer-sp-giant: 50px;
  --spacer-sp-extra-giant: 60px;
  --size-s-extra-tiny: 20px;
  --size-s-tiny: 25px;
  --size-s-small: 30px;
  --size-s-normal: 35px;
  --size-s-normal-big: 40px;
  --size-s-big: 50px;
  --modal-size-ms-small: 300px;
  --modal-size-ms-normal: 600px;
  --modal-size-ms-big: 800px;
  --drawer-size-ds-small: 200px;
  --drawer-size-ds-normal: 250px;
  --drawer-size-ds-big: 350px;
  --transition-quickly: 100ms;
  --transition-promptly: 150ms;
  --transition-slowly: 250ms;
  --transition-super-slowly: 500ms;
  --gradient-brand_gradient: linear-gradient(to right, #5A16B6 0%, #2D0B5B 100%);
  --gradient-brand_gradient-level_1: linear-gradient(to right, #8D49E9 0%, #8D49E9 100%);
  --gradient-brand_gradient-level_2: linear-gradient(to right, #701CE3 0%, #701CE3 100%);
}

.dark {
  --color-background: #121119;
  --color-background-level_1: #1B1A22;
  --color-font: #FBF8FE;
  --color-font-level_1: rgba(251, 248, 254, 0.70);
  --color-font-level_2: rgba(251, 248, 254, 0.50);
  --color-neutral-level_1: rgba(246, 241, 253, 0.05);
  --color-neutral-level_2: rgba(246, 241, 253, 0.10);
  --color-neutral-level_3: rgba(246, 241, 253, 0.15);
  --color-brand: #7E33E6;
  --color-brand-default_30: rgba(126, 51, 230, 0.30);
  --color-brand-level_1: #8D49E9;
  --color-brand-level_2: #701CE3;
  --color-alert: #FFC01A;
  --color-alert-default_30: rgba(255, 192, 26, 0.30);
  --color-alert-level_1: #FFB900;
  --color-alert-level_2: #FFC733;
  --color-confirmation: #1A94FF;
  --color-confirmation-default_30: rgba(26, 148, 255, 0.30);
  --color-confirmation-level_1: #1A94FF;
  --color-confirmation-level_2: #1A94FF;
  --color-confirmation_alt: #3BDDAD;
  --color-confirmation_alt-default_30: rgba(59, 221, 173, 0.30);
  --color-confirmation_alt-level_1: #26D9A4;
  --color-confirmation_alt-level_2: #51E1B7;
  --color-success: #3BDDAD;
  --color-success-default_30: rgba(59, 221, 173, 0.30);
  --color-success-level_1: #26D9A4;
  --color-success-level_2: #51E1B7;
  --color-danger: #F22727;
  --color-danger-default_30: rgba(242, 39, 39, 0.30);
  --color-danger-level_1: #F00F0F;
  --color-danger-level_2: #F33F3F;
  --gradient-brand_gradient: linear-gradient(to right, #5A16B6 0%, #431188 100%);
  --gradient-brand_gradient-level_1: linear-gradient(to right, #8D49E9 0%, #8D49E9 100%);
  --gradient-brand_gradient-level_2: linear-gradient(to right, #701CE3 0%, #701CE3 100%);
}

@layer base {
  body {
    font-family: var(--font-family-body);
  }
}

@utility scrollbar-custom {
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-level_3) transparent;

  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral-level_3);
    border-radius: 9999px;
    /* transparent border + padding-box clip insets the thumb so it reads as a
       slim floating pill instead of filling the full 8px track width. */
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-font-level_2);
  }
}

/* Vendored from react-grid-layout@2.2.3 (css/styles.css), appended to the DS
   stylesheet by build.mjs.

   The MIT License (MIT) — Copyright (c) 2016 Samuel Reed
   https://github.com/react-grid-layout/react-grid-layout/blob/master/LICENSE
   Permission is hereby granted, free of charge, to any person obtaining a copy of
   this software and associated documentation files (the "Software"), to deal in
   the Software without restriction, including without limitation the rights to
   use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
   the Software, and to permit persons to whom the Software is furnished to do so,
   subject to the above copyright notice and this permission notice being included
   in all copies or substantial portions of the Software.

   Why vendored instead of imported: GridView.tsx used to do a side-effect
   `import 'react-grid-layout/css/styles.css'`. That import survives into the
   published bundle, so `require('@ploomescrm/ui')` or importing it from Node
   (SSR / React Server Components) crashes — Node cannot load a .css module
   ("Unexpected token '.'" for CJS, ERR_UNKNOWN_FILE_EXTENSION for ESM).
   Shipping the rules here keeps the package importable on the server while
   consumers still get GridView's drag/resize styles for free, since importing
   '@ploomescrm/ui/theme' is already required by the setup.

   The `.react-grid-placeholder` background is the one intentional change from
   upstream: `red` -> the DS brand token, so the drop placeholder respects dark
   mode and whitelabel. Keep the rest in sync when bumping react-grid-layout. */

.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: var(--color-brand);
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.react-grid-item:hover > .react-resizable-handle {
  opacity: 1;
}

.react-grid-item > .react-resizable-handle::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}