@import "./file-icons.css";

@import "themes/default-dark.css";
@import "themes/default-light.css";

@font-face {
  font-family: Menlo;
  font-weight: normal;
  font-style: normal;
  src: url("fonts/Menlo-Regular.ttf");
}

@font-face {
  font-family: Inter;
  font-weight: 100;
  font-style: normal;
  src: url("fonts/Inter/Inter-Thin.ttf");
}

@font-face {
  font-family: Inter;
  font-weight: 200;
  font-style: normal;
  src: url("fonts/Inter/Inter-ExtraLight.ttf");
}

@font-face {
  font-family: Inter;
  font-weight: 300;
  font-style: normal;
  src: url("fonts/Inter/Inter-Light.ttf");
}

@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  src: url("fonts/Inter/Inter-Regular.ttf");
}

@font-face {
  font-family: Inter;
  font-weight: 500;
  font-style: normal;
  src: url("fonts/Inter/Inter-Medium.ttf");
}

@font-face {
  font-family: Inter;
  font-weight: 600;
  font-style: normal;
  src: url("fonts/Inter/Inter-SemiBold.ttf");
}

@font-face {
  font-family: Inter;
  font-weight: 700;
  font-style: normal;
  src: url("fonts/Inter/Inter-Bold.ttf");
}

@font-face {
  font-family: Inter;
  font-weight: 800;
  font-style: normal;
  src: url("fonts/Inter/Inter-ExtraBold.ttf");
}

@font-face {
  font-family: Inter;
  font-weight: 900;
  font-style: normal;
  src: url("fonts/Inter/Inter-Black.ttf");
}

@font-face {
  font-family: "Fira Code";
  font-weight: normal;
  font-style: normal;
  src: url("fonts/FiraCode/FiraCode-Regular.ttf");
}

@font-face {
  font-family: "Fira Code";
  font-weight: 300;
  font-style: normal;
  src: url("fonts/FiraCode/FiraCode-Light.ttf");
}

@font-face {
  font-family: "Fira Code";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/FiraCode/FiraCode-Regular.ttf");
}

@font-face {
  font-family: "Fira Code";
  font-weight: 500;
  font-style: normal;
  src: url("fonts/FiraCode/FiraCode-Medium.ttf");
}

@font-face {
  font-family: "Fira Code";
  font-weight: 600;
  font-style: normal;
  src: url("fonts/FiraCode/FiraCode-SemiBold.ttf");
}

@font-face {
  font-family: "Fira Code";
  font-weight: 700;
  font-style: normal;
  src: url("fonts/FiraCode/FiraCode-Bold.ttf");
}

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


@layer base {
  body {
    --default-black-bg-sub: 11, 11, 15; /* #0B0B0F */
    --default-black-bg-sub-hover: 29, 29, 39; /* #1D1D27 */
    --default-black-bg-base: 24, 26, 31; /* #181A1F */
    --default-black-bg-base-hover: 38, 39, 46; /* #26272E */
    --default-black-bg-selected: 94, 135, 203; /* #5E87CB 12% */
    --default-black-bg-shade: 31, 31, 42; /* #1F1F2A */
    --default-black-bg-shade-hover: 37, 37, 52; /* #252534 */
    --default-black-bg-border: 41, 43, 48; /* #292B30 */
    --default-black-bg-border-hover: 60, 63, 72; /* #3C3F48 */
    --default-black-bg-border-selected: 94, 135, 203; /* #5E87CB */
    --default-black-bg-divider: 29, 30, 34; /* #1D1E22 */
    --default-black-bg-contrast: 240, 243, 248; /* #F0F3F8 */
    --default-black-bg-contrast-hover: 222, 227, 234; /* #DEE3EA */

    --default-black-label-title: 249, 251, 254; /* #F9FBFE */
    --default-black-label-base: 166, 176, 187; /* #A6B0BB */
    --default-black-label-muted: 111, 117, 123; /* #6F757B */
    --default-black-label-faint: 62, 64, 70; /* #3E4046 */
    --default-black-label-link: 70, 128, 224; /* #4680E0 */
    --default-black-label-contrast: 11, 11, 15; /* #0B0B0F */
    --default-black-label-control: 254, 254, 255; /* #FEFEFF */

    --default-black-sub-surface: 11, 11, 15; /* #0B0B0F, 75% */
    --default-black-shade-surface: 31, 31, 42; /* #1F1F2A, 75% */
    --default-black-base-surface: 24, 26, 31; /* #181A1F, 75% */

    --default-black-brand-default: 91, 110, 221; /* #5B6EDD */
    --default-black-brand-default-hover: 99, 121, 249; /* #6379F9 */
    --default-black-brand-default-subtitle: 39, 45, 80; /* #272D50 */
    --default-black-brand-studio: 199, 54, 115; /* #C73673 */
    --default-black-brand-studio-hover: 240, 54, 132; /* #F03684 */
    --default-black-brand-studio-subtle: 68, 25, 43; /* #44192B */

    --default-black-green: 112, 161, 102; /* #70A166 */
    --default-black-green-subtle: 28, 44, 28; /* #1C2C1C */
    --default-black-green-subtle-hover: 35, 56, 35; /* #233823 */
    --default-black-red: 197, 92, 87; /* #C55C57 */
    --default-black-red-subtle: 51, 26, 26; /* #331A1A */
    --default-black-red-subtle-hover: 68, 34, 34; /* #442222 */
    --default-black-yellow: 234, 184, 92; /* #EAB85C */
    --default-black-yellow-subtle: 45, 29, 8; /* #2D1D08 */
    --default-black-yellow-subtle-hover: 65, 42, 12; /* #412A0C */
    --default-black-blue: 65, 111, 229; /* #416FE5 */
    --default-black-blue-subtle: 23, 35, 57; /* #172339 */
    --default-black-blue-subtle-hover: 29, 44, 71; /* #1D2C47 */

    --default-black-line-select: 25, 50, 82; /* #193252 */


    --default-dark-bg-sub: 17, 19, 28; /* #11131C */
    --default-dark-bg-sub-hover: 21, 24, 35; /* #151823 */
    --default-dark-bg-base: 18, 24, 38; /* #121826 */
    --default-dark-bg-base-hover: 26, 33, 49; /* #1A2131 */
    --default-dark-bg-selected: 94, 135, 203; /* #5E87CB 12% */
    --default-dark-bg-shade: 28, 31, 45; /* #1C1F2D */
    --default-dark-bg-shade-hover: 34, 38, 55; /* #222637 */
    --default-dark-bg-border: 37, 46, 60; /* #252E3C */
    --default-dark-bg-border-hover: 46, 56, 73; /* #2E3849 */
    --default-dark-bg-border-selected: 94, 135, 203; /* #5E87CB */
    --default-dark-bg-divider: 25, 32, 44; /* #19202C */
    --default-dark-bg-contrast: 240, 243, 248; /* #F0F3F8 */
    --default-dark-bg-contrast-hover: 229, 233, 239; /* #E5E9EF */

    --default-dark-label-title: 240, 243, 248; /* #F0F3F8 */
    --default-dark-label-base: 157, 163, 174; /* #9DA3AE */
    --default-dark-label-muted: 108, 114, 127; /* #6C727F */
    --default-dark-label-faint: 57, 65, 80; /* #394150 */
    --default-dark-label-link: 81, 118, 181; /* #5176B5 */
    --default-dark-label-contrast: 4, 7, 17; /* #040711 */
    --default-dark-label-control: 254, 254, 255; /* #FEFEFF */

    --default-dark-sub-surface: 17, 19, 28; /* #11131C, 75% */
    --default-dark-shade-surface: 28, 31, 45; /* #1C1F2D, 75% */
    --default-dark-base-surface: 18, 24, 38; /* #121826, 75% */

    --default-dark-brand-default: 91, 110, 221; /* #5B6EDD */
    --default-dark-brand-default-hover: 99, 121, 249; /* #6379F9 */
    --default-dark-brand-default-subtitle: 39, 45, 80; /* #272D50 */
    --default-dark-brand-studio: 199, 54, 115; /* #C73673 */
    --default-dark-brand-studio-hover: 240, 54, 132; /* #F03684 */
    --default-dark-brand-studio-subtle: 68, 25, 43; /* #44192B */

    --default-dark-green: 112, 161, 102; /* #70A166 */
    --default-dark-green-subtle: 28, 44, 28; /* #1C2C1C */
    --default-dark-green-subtle-hover: 35, 56, 35; /* #233823 */
    --default-dark-red: 197, 92, 87; /* #C55C57 */
    --default-dark-red-subtle: 51, 26, 26; /* #331A1A */
    --default-dark-red-subtle-hover: 68, 34, 34; /* #442222 */
    --default-dark-yellow: 234, 184, 92; /* #EAB85C */
    --default-dark-yellow-subtle: 45, 29, 8; /* #2D1D08 */
    --default-dark-yellow-subtle-hover: 65, 42, 12; /* #412A0C */
    --default-dark-blue: 65, 111, 229; /* #416FE5 */
    --default-dark-blue-subtle: 23, 35, 57; /* #172339 */
    --default-dark-blue-subtle-hover: 29, 44, 71; /* #1D2C47 */

    --default-dark-line-select: 25, 50, 82; /* #193252 */


    --default-light-bg-sub: 250, 250, 250; /* #FAFAFA */
    --default-light-bg-sub-hover: 241, 241, 242; /* #F1F1F2 */
    --default-light-bg-base: 255, 255, 255; /* #FFFFFF */
    --default-light-bg-base-hover: 234, 237, 243; /* #EAEDF3 */
    --default-light-bg-selected: 94, 149, 241; /* #5E95F1 12% */
    --default-light-bg-shade: 241, 243, 248; /* #F1F3F8 */
    --default-light-bg-shade-hover: 231, 234, 242; /* #E7EAF2 */
    --default-light-bg-border: 216, 220, 226; /* #D8DCE2 */
    --default-light-bg-border-hover: 186, 190, 197; /* #BABEC5 */
    --default-light-bg-border-selected: 94, 149, 241; /* #5E95F1 */
    --default-light-bg-divider: 234, 236, 241; /* #EAECF1 */
    --default-light-bg-contrast: 39, 39, 41; /* #272729 */
    --default-light-bg-contrast-hover: 25, 25, 28; /* #19191C */

    --default-light-label-title: 4, 7, 17; /* #040711 */
    --default-light-label-base: 56, 64, 77; /* #38404D */
    --default-light-label-muted: 108, 114, 127; /* #6C727F */
    --default-light-label-faint: 157, 163, 174; /* #9DA3AE */
    --default-light-label-link: 70, 128, 224; /* #4680E0 */
    --default-light-label-contrast: 255, 255, 255; /* #FFFFFF */
    --default-light-label-control: 255, 255, 255; /* #FFFFFF */

    --default-light-sub-surface: 250, 250, 250; /* #FAFAFA, 75% */
    --default-light-shade-surface: 247, 248, 251; /* #F7F8FB, 75% */
    --default-light-base-surface: 255, 255, 255; /* #FFFFFF, 75% */

    --default-light-brand-default: 91, 110, 221; /* #5B6EDD */
    --default-light-brand-default-hover: 74, 93, 204; /* #4A5DCC */
    --default-light-brand-default-subtitle: 224, 229, 252; /* #E0E5FC */
    --default-light-brand-studio: 199, 54, 115; /* #C73673 */
    --default-light-brand-studio-hover: 181, 41, 100; /* #B52964 */
    --default-light-brand-studio-subtle: 255, 207, 227; /* #FFCFE3 */

    --default-light-green: 120, 194, 106; /* #78C26A */
    --default-light-green-subtle: 226, 245, 221; /* #E2F5DD */
    --default-light-green-subtle-hover: 216, 236, 210; /* #D8ECD2 */
    --default-light-red: 221, 79, 72; /* #DD4F48 */
    --default-light-red-subtle: 248, 224, 220; /* #F8E0DC */
    --default-light-red-subtle-hover: 238, 194, 186; /* #EEC2BA */
    --default-light-yellow: 237, 171, 50; /* #EDAB32 */
    --default-light-yellow-subtle: 246, 237, 208; /* #F6EDD0 */
    --default-light-yellow-subtle-hover: 240, 231, 199; /* #F0E7C7 */
    --default-light-blue: 49, 104, 246; /* #3168F6 */
    --default-light-blue-subtle: 224, 234, 246; /* #E0EAF6 */
    --default-light-blue-subtle-hover: 221, 233, 247; /* #DDE9F7 */

    --default-light-line-select: 190, 218, 247; /* #BEDAF7 */

    --default-dark-shadow-rings-blue: 0px 0px 0px 2px rgba(194, 197, 255, 0.16);
    --default-dark-shadow-rings-gray: 0px 0px 0px 2px rgba(49, 50, 51, 0.16);
    --default-dark-shadow-float: 0px 4px 32px 0px rgba(0, 0, 0, 0.35);
    --default-dark-shadow-high: 0px 8px 24px 0px rgba(0,0,0,0.35);
    --default-dark-shadow-medium: 0px 8px 24px 0px rgba(0,0,0,0.35);
    --default-dark-shadow-low: 0px 8px 24px 0px rgba(0,0,0,0.35);

    --default-dark-onboarding-chats-img: url("../public/chatsImage-dark.png");
    --default-dark-bloop-head-img: url("../public/bloopHeadMascot.png");

    --default-light-shadow-rings-blue: 0px 0px 0px 2px rgba(194, 197, 255, 0.08);
    --default-light-shadow-rings-gray: 0px 0px 0px 2px rgba(49, 50, 51, 0.08);
    --default-light-shadow-float: 0px 4px 32px 0px rgba(0,0,0,0.16);
    --default-light-shadow-high: 0px 8px 24px 0px rgba(0,0,0,0.08);
    --default-light-shadow-medium: 0px 1px 8px 0px rgba(0,0,0,0.12);
    --default-light-shadow-low: 0px 1px 2px 0px rgba(0,0,0,0.08);

    --default-light-onboarding-chats-img: url("../public/chatsImage-light.png");
    --default-light-bloop-head-img: url("../public/bloopHeadMascotLight.png");
  }
  body[data-theme="dark"], body:not([data-theme]) {
    --bg-sub: var(--default-dark-bg-sub);
    --bg-sub-hover: var(--default-dark-bg-sub-hover);
    --bg-base: var(--default-dark-bg-base);
    --bg-base-hover: var(--default-dark-bg-base-hover);
    --bg-selected: var(--default-dark-bg-selected);
    --bg-shade: var(--default-dark-bg-shade);
    --bg-shade-hover: var(--default-dark-bg-shade-hover);
    --bg-border: var(--default-dark-bg-border);
    --bg-border-hover: var(--default-dark-bg-border-hover);
    --bg-border-selected: var(--default-dark-bg-border-selected);
    --bg-divider: var(--default-dark-bg-divider);
    --bg-contrast: var(--default-dark-bg-contrast);
    --bg-contrast-hover: var(--default-dark-bg-contrast-hover);

    --label-title: var(--default-dark-label-title);
    --label-base: var(--default-dark-label-base);
    --label-muted: var(--default-dark-label-muted);
    --label-faint: var(--default-dark-label-faint);
    --label-link: var(--default-dark-label-link);
    --label-contrast: var(--default-dark-label-contrast);
    --label-control: var(--default-dark-label-control);

    --sub-surface: var(--default-dark-sub-surface);
    --shade-surface: var(--default-dark-shade-surface);
    --base-surface: var(--default-dark-base-surface);

    --brand-default: var(--default-dark-brand-default);
    --brand-default-hover: var(--default-dark-brand-default-hover);
    --brand-default-subtitle: var(--default-dark-brand-default-subtitle);
    --brand-studio: var(--default-dark-brand-studio);
    --brand-studio-hover: var(--default-dark-brand-studio-hover);
    --brand-studio-subtle: var(--default-dark-brand-studio-subtle);

    --green: var(--default-dark-green);
    --green-subtle: var(--default-dark-green-subtle);
    --green-subtle-hover: var(--default-dark-green-subtle-hover);
    --red: var(--default-dark-red);
    --red-subtle: var(--default-dark-red-subtle);
    --red-subtle-hover: var(--default-dark-red-subtle-hover);
    --yellow: var(--default-dark-yellow);
    --yellow-subtle: var(--default-dark-yellow-subtle);
    --yellow-subtle-hover: var(--default-dark-yellow-subtle-hover);
    --blue: var(--default-dark-blue);
    --blue-subtle: var(--default-dark-blue-subtle);
    --blue-subtle-hover: var(--default-dark-blue-subtle-hover);

    --line-select: var(--default-dark-line-select);

    --shadow-rings-blue: var(--default-dark-shadow-rings-blue);
    --shadow-rings-gray: var(--default-dark-shadow-rings-gray);
    --shadow-float: var(--default-dark-shadow-float);
    --shadow-high: var(--default-dark-shadow-high);
    --shadow-medium: var(--default-dark-shadow-medium);
    --shadow-low: var(--default-dark-shadow-low);

    --onboarding-chats-img: var(--default-dark-onboarding-chats-img);
    --bloop-head-img: var(--default-dark-bloop-head-img);
  }
  body[data-theme="black"] {
    --bg-sub: var(--default-black-bg-sub);
    --bg-sub-hover: var(--default-black-bg-sub-hover);
    --bg-base: var(--default-black-bg-base);
    --bg-base-hover: var(--default-black-bg-base-hover);
    --bg-selected: var(--default-black-bg-selected);
    --bg-shade: var(--default-black-bg-shade);
    --bg-shade-hover: var(--default-black-bg-shade-hover);
    --bg-border: var(--default-black-bg-border);
    --bg-border-hover: var(--default-black-bg-border-hover);
    --bg-border-selected: var(--default-black-bg-border-selected);
    --bg-divider: var(--default-black-bg-divider);
    --bg-contrast: var(--default-black-bg-contrast);
    --bg-contrast-hover: var(--default-black-bg-contrast-hover);

    --label-title: var(--default-black-label-title);
    --label-base: var(--default-black-label-base);
    --label-muted: var(--default-black-label-muted);
    --label-faint: var(--default-black-label-faint);
    --label-link: var(--default-black-label-link);
    --label-contrast: var(--default-black-label-contrast);
    --label-control: var(--default-black-label-control);

    --sub-surface: var(--default-black-sub-surface);
    --shade-surface: var(--default-black-shade-surface);
    --base-surface: var(--default-black-base-surface);

    --brand-default: var(--default-black-brand-default);
    --brand-default-hover: var(--default-black-brand-default-hover);
    --brand-default-subtitle: var(--default-black-brand-default-subtitle);
    --brand-studio: var(--default-black-brand-studio);
    --brand-studio-hover: var(--default-black-brand-studio-hover);
    --brand-studio-subtle: var(--default-black-brand-studio-subtle);

    --green: var(--default-black-green);
    --green-subtle: var(--default-black-green-subtle);
    --green-subtle-hover: var(--default-black-green-subtle-hover);
    --red: var(--default-black-red);
    --red-subtle: var(--default-black-red-subtle);
    --red-subtle-hover: var(--default-black-red-subtle-hover);
    --yellow: var(--default-black-yellow);
    --yellow-subtle: var(--default-black-yellow-subtle);
    --yellow-subtle-hover: var(--default-black-yellow-subtle-hover);
    --blue: var(--default-black-blue);
    --blue-subtle: var(--default-black-blue-subtle);
    --blue-subtle-hover: var(--default-black-blue-subtle-hover);

    --line-select: var(--default-black-line-select);

    --shadow-rings-blue: var(--default-dark-shadow-rings-blue);
    --shadow-rings-gray: var(--default-dark-shadow-rings-gray);
    --shadow-float: var(--default-dark-shadow-float);
    --shadow-high: var(--default-dark-shadow-high);
    --shadow-medium: var(--default-dark-shadow-medium);
    --shadow-low: var(--default-dark-shadow-low);

    --onboarding-chats-img: var(--default-dark-onboarding-chats-img);
    --bloop-head-img: var(--default-dark-bloop-head-img);
  }
  @media (prefers-color-scheme: dark) {
    body[data-theme="system"] {
      --bg-sub: var(--default-dark-bg-sub);
      --bg-sub-hover: var(--default-dark-bg-sub-hover);
      --bg-base: var(--default-dark-bg-base);
      --bg-base-hover: var(--default-dark-bg-base-hover);
      --bg-selected: var(--default-dark-bg-selected);
      --bg-shade: var(--default-dark-bg-shade);
      --bg-shade-hover: var(--default-dark-bg-shade-hover);
      --bg-border: var(--default-dark-bg-border);
      --bg-border-hover: var(--default-dark-bg-border-hover);
      --bg-border-selected: var(--default-dark-bg-border-selected);
      --bg-divider: var(--default-dark-bg-divider);
      --bg-contrast: var(--default-dark-bg-contrast);
      --bg-contrast-hover: var(--default-dark-bg-contrast-hover);

      --label-title: var(--default-dark-label-title);
      --label-base: var(--default-dark-label-base);
      --label-muted: var(--default-dark-label-muted);
      --label-faint: var(--default-dark-label-faint);
      --label-link: var(--default-dark-label-link);
      --label-contrast: var(--default-dark-label-contrast);
      --label-control: var(--default-dark-label-control);

      --sub-surface: var(--default-dark-sub-surface);
      --shade-surface: var(--default-dark-shade-surface);
      --base-surface: var(--default-dark-base-surface);

      --brand-default: var(--default-dark-brand-default);
      --brand-default-hover: var(--default-dark-brand-default-hover);
      --brand-default-subtitle: var(--default-dark-brand-default-subtitle);
      --brand-studio: var(--default-dark-brand-studio);
      --brand-studio-hover: var(--default-dark-brand-studio-hover);
      --brand-studio-subtle: var(--default-dark-brand-studio-subtle);

      --green: var(--default-dark-green);
      --green-subtle: var(--default-dark-green-subtle);
      --green-subtle-hover: var(--default-dark-green-subtle-hover);
      --red: var(--default-dark-red);
      --red-subtle: var(--default-dark-red-subtle);
      --red-subtle-hover: var(--default-dark-red-subtle-hover);
      --yellow: var(--default-dark-yellow);
      --yellow-subtle: var(--default-dark-yellow-subtle);
      --yellow-subtle-hover: var(--default-dark-yellow-subtle-hover);
      --blue: var(--default-dark-blue);
      --blue-subtle: var(--default-dark-blue-subtle);
      --blue-subtle-hover: var(--default-dark-blue-subtle-hover);

      --line-select: var(--default-dark-line-select);

      --shadow-rings-blue: var(--default-dark-shadow-rings-blue);
      --shadow-rings-gray: var(--default-dark-shadow-rings-gray);
      --shadow-float: var(--default-dark-shadow-float);
      --shadow-high: var(--default-dark-shadow-high);
      --shadow-medium: var(--default-dark-shadow-medium);
      --shadow-low: var(--default-dark-shadow-low);

      --onboarding-chats-img: var(--default-dark-onboarding-chats-img);
      --bloop-head-img: var(--default-dark-bloop-head-img);
    }
  }
  body[data-theme="light"] {
    --bg-sub: var(--default-light-bg-sub);
    --bg-sub-hover: var(--default-light-bg-sub-hover);
    --bg-base: var(--default-light-bg-base);
    --bg-base-hover: var(--default-light-bg-base-hover);
    --bg-selected: var(--default-light-bg-selected);
    --bg-shade: var(--default-light-bg-shade);
    --bg-shade-hover: var(--default-light-bg-shade-hover);
    --bg-border: var(--default-light-bg-border);
    --bg-border-hover: var(--default-light-bg-border-hover);
    --bg-border-selected: var(--default-light-bg-border-selected);
    --bg-divider: var(--default-light-bg-divider);
    --bg-contrast: var(--default-light-bg-contrast);
    --bg-contrast-hover: var(--default-light-bg-contrast-hover);

    --label-title: var(--default-light-label-title);
    --label-base: var(--default-light-label-base);
    --label-muted: var(--default-light-label-muted);
    --label-faint: var(--default-light-label-faint);
    --label-link: var(--default-light-label-link);
    --label-contrast: var(--default-light-label-contrast);
    --label-control: var(--default-light-label-control);

    --sub-surface: var(--default-light-sub-surface);
    --shade-surface: var(--default-light-shade-surface);
    --base-surface: var(--default-light-base-surface);

    --brand-default: var(--default-light-brand-default);
    --brand-default-hover: var(--default-light-brand-default-hover);
    --brand-default-subtitle: var(--default-light-brand-default-subtitle);
    --brand-studio: var(--default-light-brand-studio);
    --brand-studio-hover: var(--default-light-brand-studio-hover);
    --brand-studio-subtle: var(--default-light-brand-studio-subtle);

    --green: var(--default-light-green);
    --green-subtle: var(--default-light-green-subtle);
    --green-subtle-hover: var(--default-light-green-subtle-hover);
    --red: var(--default-light-red);
    --red-subtle: var(--default-light-red-subtle);
    --red-subtle-hover: var(--default-light-red-subtle-hover);
    --yellow: var(--default-light-yellow);
    --yellow-subtle: var(--default-light-yellow-subtle);
    --yellow-subtle-hover: var(--default-light-yellow-subtle-hover);
    --blue: var(--default-light-blue);
    --blue-subtle: var(--default-light-blue-subtle);
    --blue-subtle-hover: var(--default-light-blue-subtle-hover);

    --line-select: var(--default-light-line-select);

    --shadow-rings-blue: var(--default-light-shadow-rings-blue);
    --shadow-rings-gray: var(--default-light-shadow-rings-gray);
    --shadow-float: var(--default-light-shadow-float);
    --shadow-high: var(--default-light-shadow-high);
    --shadow-medium: var(--default-light-shadow-medium);
    --shadow-low: var(--default-light-shadow-low);

    --onboarding-chats-img: var(--default-dark-onboarding-chats-img);
    --bloop-head-img: var(--default-light-bloop-head-img);
  }
  @media (prefers-color-scheme: light) {
    body[data-theme="system"] {
      --bg-sub: var(--default-light-bg-sub);
      --bg-sub-hover: var(--default-light-bg-sub-hover);
      --bg-base: var(--default-light-bg-base);
      --bg-base-hover: var(--default-light-bg-base-hover);
      --bg-selected: var(--default-light-bg-selected);
      --bg-shade: var(--default-light-bg-shade);
      --bg-shade-hover: var(--default-light-bg-shade-hover);
      --bg-border: var(--default-light-bg-border);
      --bg-border-hover: var(--default-light-bg-border-hover);
      --bg-border-selected: var(--default-light-bg-border-selected);
      --bg-divider: var(--default-light-bg-divider);
      --bg-contrast: var(--default-light-bg-contrast);
      --bg-contrast-hover: var(--default-light-bg-contrast-hover);

      --label-title: var(--default-light-label-title);
      --label-base: var(--default-light-label-base);
      --label-muted: var(--default-light-label-muted);
      --label-faint: var(--default-light-label-faint);
      --label-link: var(--default-light-label-link);
      --label-contrast: var(--default-light-label-contrast);
      --label-control: var(--default-light-label-control);

      --sub-surface: var(--default-light-sub-surface);
      --shade-surface: var(--default-light-shade-surface);
      --base-surface: var(--default-light-base-surface);

      --brand-default: var(--default-light-brand-default);
      --brand-default-hover: var(--default-light-brand-default-hover);
      --brand-default-subtitle: var(--default-light-brand-default-subtitle);
      --brand-studio: var(--default-light-brand-studio);
      --brand-studio-hover: var(--default-light-brand-studio-hover);
      --brand-studio-subtle: var(--default-light-brand-studio-subtle);

      --green: var(--default-light-green);
      --green-subtle: var(--default-light-green-subtle);
      --green-subtle-hover: var(--default-light-green-subtle-hover);
      --red: var(--default-light-red);
      --red-subtle: var(--default-light-red-subtle);
      --red-subtle-hover: var(--default-light-red-subtle-hover);
      --yellow: var(--default-light-yellow);
      --yellow-subtle: var(--default-light-yellow-subtle);
      --yellow-subtle-hover: var(--default-light-yellow-subtle-hover);
      --blue: var(--default-light-blue);
      --blue-subtle: var(--default-light-blue-subtle);
      --blue-subtle-hover: var(--default-light-blue-subtle-hover);

      --line-select: var(--default-light-line-select);

      --shadow-rings-blue: var(--default-light-shadow-rings-blue);
      --shadow-rings-gray: var(--default-light-shadow-rings-gray);
      --shadow-float: var(--default-light-shadow-float);
      --shadow-high: var(--default-light-shadow-high);
      --shadow-medium: var(--default-light-shadow-medium);
      --shadow-low: var(--default-light-shadow-low);

      --onboarding-chats-img: var(--default-dark-onboarding-chats-img);
      --bloop-head-img: var(--default-light-bloop-head-img);
    }
  }

  .inline-container {
    container-type: inline-size;
  }

  @container (max-width: 519px) {
    .wrap-in-sm-container {
      @apply flex-wrap py-2 h-auto;
    }
  }

  @container (min-width: 520px) {
    .wrap-in-sm-container {
      @apply h-10;
    }
  }

  @container (max-width: 749px) {
    .wrap-in-md-container {
      @apply flex-wrap py-2 h-auto;
    }
  }

  @container (min-width: 750px) {
    .wrap-in-md-container {
      @apply h-10;
    }
  }
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgb(var(--bg-sub));
  color: rgb(var(--label-title));
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

input[type="search" i]::-webkit-search-cancel-button {
  display: none;
}

input::placeholder {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: -0.02em;
}

h1, .h1 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 3rem;
  line-height: 110%;
  letter-spacing: -0.02em;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

h2, .h2 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 2.375rem;
  line-height: 110%;
  letter-spacing: -0.02em;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

h3, .h3 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 110%;
  letter-spacing: -0.02em;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

h4, .h4 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 110%;
  letter-spacing: -0.02em;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

h5, .h5 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 110%;
  letter-spacing: -0.02em;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: default;
}

.headline-b {
  font-family: 'Inter', sans-serif;
  font-size: 1.625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 123.077%;
  letter-spacing: -0.26px;
}

.title-s {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 500;
  line-height: 133%;
  letter-spacing: -0.15px;
}

.title-m {
  font-family: 'Inter', sans-serif;
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 500;
  line-height: 129.412%;
  letter-spacing: -0.17px;
}

.title-m-b {
  font-family: 'Inter', sans-serif;
  font-size: 1.0625rem;
  font-style: normal;
  font-weight: 600;
  line-height: 129.412%;
  letter-spacing: -0.17px;
}

.subhead-l {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 110%;
  letter-spacing: -0.02em;
}

.subhead-m {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1rem;
  line-height: 110%;
  letter-spacing: -0.02em;
}

.subhead-s {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 110%;
  letter-spacing: -0.02em;
}

.body-l {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 160%;
  letter-spacing: -0.02em;
}

.body-m {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 160%;
  letter-spacing: -0.02em;
}

.body-m-strong {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  line-height: 160%;
  letter-spacing: -0.02em;
}

.body-s {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 123.077%;
}

.body-s-b {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 123.077%;
}

.body-mini {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 116.667%;
}

.body-mini-b {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 116.667%;
}

.body-tiny {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 120%;
}

.body-base-b {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.937rem;
  line-height: 133.333%;
}

.body-base {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.937rem;
  line-height: 133.333%;
}

.callout {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 100%;
  letter-spacing: -0.02em;
}

.caption {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 140%;
  letter-spacing: -0.01em;
}

.caption-strong {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 140%;
  letter-spacing: -0.01em;
}

.code-s {
  font-family: "Fira Code", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 161%;
  letter-spacing: -0.13px;
}

.code-m {
  font-family: "Fira Code", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1rem;
  line-height: 160%;
}

.code-mini {
  font-family: "Fira Code", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 166.667%;
  letter-spacing: -0.12px;
}

.code-tiny-b {
  font-family: "Fira Code", sans-serif;
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 500;
  line-height: 180%;
}

.ellipsis {
  @apply overflow-ellipsis whitespace-nowrap overflow-hidden;
}

.fade-bottom {
  mask-image: linear-gradient(to bottom, black calc(100% - 45px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 45px), transparent 100%);
}

.fade-right {
  mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}

.auto-fade-horizontal {
  overflow-x: scroll;
  --fade-length: 40px;
  --start-fade: 0px;
  --end-fade: 0px;
  -webkit-mask: linear-gradient(
          to right,
          transparent,
          black var(--start-fade),
          black calc(100% - var(--end-fade)),
          transparent
  );
}
.auto-fade-horizontal[data-overflow-left] {
  --start-fade: var(--fade-length);
}
.auto-fade-horizontal[data-overflow-right] {
  --end-fade: var(--fade-length);
}

.auto-fade-vertical {
  overflow-x: scroll;
  --fade-length: 40px;
  --start-fade: 0px;
  --end-fade: 0px;
  -webkit-mask: linear-gradient(
          to bottom,
          transparent,
          black var(--start-fade),
          black calc(100% - var(--end-fade)),
          transparent
  );
}
.auto-fade-vertical[data-overflow-top] {
  --start-fade: var(--fade-length);
}
.auto-fade-vertical[data-overflow-bottom] {
  --end-fade: var(--fade-length);
}

.backdrop-blur-0 {
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

.backdrop-blur-2 {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.backdrop-blur-4 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.backdrop-blur-6 {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.backdrop-blur-8 {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dir-rtl {
  direction: rtl;
}

/*Fix react-virtualized cutting code overflow*/
.ReactVirtualized__Grid__innerScrollContainer {
  overflow: auto !important;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;
}

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

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

.show-scrollbar::-webkit-scrollbar {
  display: initial;
  width: 7px;
}

.show-scrollbar *::-webkit-scrollbar {
  display: none;
}

.show-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-bg-base-hover hover:bg-bg-border-hover rounded-full
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* For IE, Edge and Firefox */
.scrollbar-show {
  -ms-overflow-style: initial;  /* IE and Edge */
  scrollbar-width: initial;  /* Firefox */
}

.readme h1, .readme h2, .readme h3, .readme h4, .readme h5, .readme h6, .readme p, .readme span, .readme div {
  cursor: auto;
}

.readme h1, .readme h2, .readme h3, .readme h4, .readme h5, .readme h6, .readme p, .readme span, .readme div,
.article-response h1, .article-response h2, .article-response h3, .article-response h4, .article-response h5,
.article-response h6, .article-response p {
  margin: revert;
}

.code-studio-md h1:not(:first-child), .code-studio-md h2:not(:first-child), .code-studio-md h3:not(:first-child), .code-studio-md h4:not(:first-child), .code-studio-md h5:not(:first-child), .code-studio-md h6:not(:first-child), .code-studio-md p:not(:first-child),
.doc-section h1:not(:first-child), .doc-section h2:not(:first-child), .doc-section h3:not(:first-child), .doc-section h4:not(:first-child), .doc-section h5:not(:first-child), .doc-section h6:not(:first-child), .doc-section p:not(:first-child), .doc-section pre:not(:first-child) {
  margin-top: revert;
}

.code-studio-md h1:not(:last-child), .code-studio-md h2:not(:last-child), .code-studio-md h3:not(:last-child), .code-studio-md h4:not(:last-child), .code-studio-md h5:not(:last-child), .code-studio-md h6:not(:last-child), .code-studio-md p:not(:last-child),
.doc-section h1:not(:last-child), .doc-section h2:not(:last-child), .doc-section h3:not(:last-child), .doc-section h4:not(:last-child), .doc-section h5:not(:last-child), .doc-section h6:not(:last-child), .doc-section p:not(:last-child), .doc-section pre:not(:last-child) {
  margin-bottom: revert;
}

.readme h1, .readme h2, .readme h3, .readme h4, .readme h5, .readme h6, .readme p,
.doc-section h1, .doc-section h2, .doc-section h3, .doc-section h4, .doc-section h5, .doc-section h6, .doc-section p,
.code-studio-md h1, .code-studio-md h2, .code-studio-md h3, .code-studio-md h4, .code-studio-md h5,
.code-studio-md h6, .code-studio-md p,
.article-response h1, .article-response h2, .article-response h3, .article-response h4, .article-response h5,
.article-response h6, .article-response p,
.ipynb-markdown h1, .ipynb-markdown h2, .ipynb-markdown h3, .ipynb-markdown h4, .ipynb-markdown h5,
.ipynb-markdown h6, .ipynb-markdown p {
  -webkit-user-select: initial;
  -moz-user-select: initial;
  user-select: initial;
}

.ipynb-markdown p:not(:first-child), .ipynb-markdown h1:not(:first-child), .ipynb-markdown h2:not(:first-child), .ipynb-markdown h3:not(:first-child), .ipynb-markdown h4:not(:first-child){
  margin-top: revert;
}

.ipynb-markdown p:not(:last-child), .ipynb-markdown h1:not(:last-child), .ipynb-markdown h2:not(:last-child), .ipynb-markdown h3:not(:last-child), .ipynb-markdown h4:not(:last-child){
  margin-bottom: revert;
}

.ipynb-markdown blockquote {
  @apply border-l-2 border-bg-border;
  margin: 1em 2em;
  padding: 0 1em;
}

.article-response h1, .article-response h2, .article-response h3, .article-response h4, .article-response h5,
.article-response h6 {
  @apply text-label-title;
}

.readme h1, .readme h2 {
  border-bottom: 1px solid rgb(var(--bg-border));
  padding-bottom: 0.6rem;
}

.readme h1, .article-response h1, .markdown h1, .code-studio-md h1, .doc-section h1 {
  font-size: 2rem;
}

.readme h2, .article-response h2, .markdown h2, .code-studio-md h2, .doc-section h2 {
  font-size: 1.5rem;
}

.readme h3, .article-response h3, .markdown h3, .code-studio-md h3, .doc-section h3 {
  font-size: 1.25rem
}

.readme h4, .article-response h4, .markdown h4, .code-studio-md h4, .doc-section h4 {
  font-size: 1rem
}

.readme h5, .article-response h5, .markdown h5, .code-studio-md h5, .doc-section h5 {
  font-size: .875rem
}

.readme h6, .article-response h6, .markdown h6, .code-studio-md h6, .doc-section h6 {
  font-size: .85rem
}

.readme ul, .article-response ul, .markdown ul, .code-studio-md ul, .doc-section ul {
  list-style: revert;
  margin: revert;
  padding: revert;
}

.readme ol, .article-response ol, .markdown ol, .code-studio-md ol, .doc-section ol {
  list-style: revert;
  margin: revert;
  padding: revert;
}

.readme a, .markdown a, .doc-section a {
  color: rgb(var(--label-link));
}

.article-response a, .summary-card a, .code-studio-md a {
  background-color: rgb(var(--bg-shade));
  border: 1px solid rgb(var(--bg-border));
  border-radius: 4px;
  padding: 2px 4px;
}

.code-studio-md .folder-chip a {
  background-color: transparent;
  border: unset;
}

.article-response li>p, .code-studio-md li>p {
  margin: 0;
  display: unset;
}

.article-response code, .summary-card code, .code-studio-md code, .doc-section :not(pre) code, .green-code {
  color: #14B8A6;
  font-family: Menlo, sans-serif;
  font-size: 0.95em;
}

.doc-section pre code {
  color: inherit;
}

.markdown code {
  background-color: rgb(var(--bg-shade));
  border: 1px solid rgb(var(--bg-border));
  padding: 1px 3px;
  border-radius: 4px;
}

.article-response pre:has(code), .code-studio-md pre:has(code), .doc-section pre:has(code) {
  background-color: rgb(var(--bg-shade));
  border: 1px solid rgb(var(--bg-border));
  border-radius: 8px;
  padding: 12px;
  white-space: pre-wrap;
}

.doc-section pre:has(code) {
  overflow: auto;
}

.hljs-addition {
  width: auto !important;
}

.search-highlight {
  background-color: rgba(var(--yellow), 0.25);
}

.search-highlight-active {
  background-color: rgba(var(--yellow), 0.5);
}

.onboarding-chats-img {
  content: var(--onboarding-chats-img);
}

.bloop-head-img {
  content: var(--bloop-head-img);
}

.notransition * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.chat-head-bg {
  background: radial-gradient(47.73% 47.73% at 50% 0%,transparent 0%, rgb(var(--chat-bg-sub)) 100%);
}

.break-word {
  word-break: break-word;
}

.file-icon-lg span[class*="-icon"]:before {
  transform: scale(125%);
}

.padding-start > *:first-child {
  padding-left: 32px;
}

/* prose mirror editor start */
.ProseMirror {
  max-height: 40vh;
  overflow: auto;
  white-space: pre-wrap;
}

.ProseMirror pre code {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: inherit;
}

.ProseMirror pre {
  font-family: inherit;
  font-size: inherit;
}

.ProseMirror:focus {
  outline: none;
}

.ProseMirror[data-placeholder]::before {
  color: rgb(var(--label-muted));
  position: absolute;
  content: attr(data-placeholder);
  pointer-events: none;
}

img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
}

.suggestion-item-active .suggestion-item {
  @apply bg-bg-selected
}
/* prose mirror editor end */

.icon-stroked path {
  stroke: rgb(var(--bg-sub));
  stroke-width: 1px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* react-mentions editor start */
.w-full__suggestions {
  background-color: transparent !important;
}
/* react-mentions editor end */