@layer cometchat {
  [data-theme='dark'] {
    /* Primary & Extended Colors */
    --cometchat-primary-color: #6852d6;
    --cometchat-extended-primary-color-50: #15102b;
    --cometchat-extended-primary-color-100: #1d173c;
    --cometchat-extended-primary-color-200: #251e4d;
    --cometchat-extended-primary-color-300: #2e245e;
    --cometchat-extended-primary-color-400: #362b6f;
    --cometchat-extended-primary-color-500: #3e3180;
    --cometchat-extended-primary-color-600: #473892;
    --cometchat-extended-primary-color-700: #4f3ea3;
    --cometchat-extended-primary-color-800: #5745b4;
    --cometchat-extended-primary-color-900: #7460d9;

    /* Neutral Colors */
    --cometchat-neutral-color-50: #141414;
    --cometchat-neutral-color-100: #1a1a1a;
    --cometchat-neutral-color-200: #272727;
    --cometchat-neutral-color-300: #383838;
    --cometchat-neutral-color-350: #414141;
    --cometchat-neutral-color-400: #4c4c4c;
    --cometchat-neutral-color-500: #858585;
    --cometchat-neutral-color-600: #989898;
    --cometchat-neutral-color-700: #a8a8a8;
    --cometchat-neutral-color-800: #c8c8c8;
    --cometchat-neutral-color-900: #ffffff;

    --cometchat-static-neutral-100: #fafafa;
    --cometchat-static-neutral-400: #4c4c4c;
    --cometchat-static-neutral-700: #5b5b5b;

    /* Alert Colors */
    --cometchat-info-color: #0d66bf;
    --cometchat-warning-color: #d08d04;
    --cometchat-success-color: #0b9f5d;
    --cometchat-message-seen-color: #56e8a7;
    --cometchat-error-color: #c73c3e;
    --cometchat-error-color-100: #3a0c05;
    --cometchat-error-color-90: #531106;

    /* Static Colors */
    --cometchat-static-black: #141414;
    --cometchat-static-white: #ffffff;
    --cometchat-static-white-70: rgba(255, 255, 255, 0.7);

    /* Background Colors */
    --cometchat-background-color-01: var(--cometchat-neutral-color-50);
    --cometchat-background-color-02: var(--cometchat-neutral-color-100);
    --cometchat-background-color-03: var(--cometchat-neutral-color-200);
    --cometchat-background-color-04: var(--cometchat-neutral-color-300);

    /* Border Colors */
    --cometchat-border-color-light: var(--cometchat-neutral-color-200);
    --cometchat-border-color-default: var(--cometchat-neutral-color-300);
    --cometchat-border-color-dark: var(--cometchat-neutral-color-400);
    --cometchat-border-color-highlight: var(--cometchat-primary-color);

    /* Text Colors */
    --cometchat-text-color-primary: var(--cometchat-neutral-color-900);
    --cometchat-text-color-secondary: var(--cometchat-neutral-color-600);
    --cometchat-text-color-tertiary: var(--cometchat-neutral-color-500);
    --cometchat-text-color-disabled: var(--cometchat-neutral-color-400);
    --cometchat-text-color-white: var(--cometchat-neutral-color-50);
    --cometchat-text-color-highlight: var(--cometchat-primary-color);

    /* Icon Colors */
    --cometchat-icon-color-primary: var(--cometchat-neutral-color-900);
    --cometchat-icon-color-secondary: var(--cometchat-neutral-color-500);
    --cometchat-icon-color-tertiary: var(--cometchat-neutral-color-400);
    --cometchat-icon-color-white: var(--cometchat-neutral-color-50);
    --cometchat-icon-color-highlight: var(--cometchat-primary-color);

    --cometchat-message-list-bg: var(--cometchat-background-color-03);

    /* Shimmer */
    --cometchat-shimmer-background-color: var(--cometchat-background-color-01);
    --cometchat-shimmer-gradient-color: linear-gradient(90deg, #383838 0%, #272727 100%);
    --cometchat-text-shimmer-gradient-color: linear-gradient(
      270deg,
      rgba(26, 26, 26, 0) 0%,
      rgba(26, 26, 26, 0.7) 50%,
      rgba(26, 26, 26, 0) 100%
    );

    /* Buttons */
    --cometchat-primary-button-background: var(--cometchat-primary-color);
    --cometchat-primary-button-text: var(--cometchat-static-white);
    --cometchat-primary-button-icon: var(--cometchat-static-white);
    --cometchat-secondary-button-background: var(--cometchat-neutral-color-900);
    --cometchat-secondary-button-text: var(--cometchat-neutral-color-900);
    --cometchat-secondary-button-icon: var(--cometchat-neutral-color-900);
    --cometchat-link-button: var(--cometchat-info-color);
    --cometchat-fab-button-background: var(--cometchat-primary-color);
    --cometchat-fab-button-icon: var(--cometchat-static-white);
    --cometchat-white-hover: var(--cometchat-neutral-color-100);
    --cometchat-white-pressed: var(--cometchat-neutral-color-300);

    /* Focus Ring */
    --cometchat-focus-ring-width: 2px;
    --cometchat-focus-ring-style: solid;
    --cometchat-focus-ring-color: var(--cometchat-primary-color);
    --cometchat-focus-ring-color-inverse: var(--cometchat-static-white);
    --cometchat-focus-ring-offset: 2px;

    /* Overlay Backgrounds (semi-transparent scrims on top of media) */
    --cometchat-overlay-background-light: rgba(0, 0, 0, 0.4);
    --cometchat-overlay-background-heavy: rgba(0, 0, 0, 0.6);
    --cometchat-drop-overlay-background: rgba(80, 80, 80, 0.95);

    /* Text Shadow */
    --cometchat-text-shadow-strong: 0 1px 3px rgba(0, 0, 0, 0.3);

    /* Image Bubble */
    --cometchat-image-bubble-container-max-width: 400px;
    --cometchat-image-bubble-container-border-radius: var(--cometchat-radius-2);
    --cometchat-image-bubble-single-max-height: 350px;
    --cometchat-image-bubble-grid-gap-mobile: var(--cometchat-spacing);
    --cometchat-image-bubble-overflow-overlay-background: var(--cometchat-overlay-background-light);
    --cometchat-image-bubble-overflow-overlay-background-hover: var(
      --cometchat-overlay-background-heavy
    );

    /* Video Bubble */
    --cometchat-video-bubble-max-width: 250px;
    --cometchat-video-bubble-max-height: 350px;
    --cometchat-video-bubble-single-max-height: 350px;
    --cometchat-video-bubble-single-min-width: 200px;
    --cometchat-video-bubble-single-min-height: 112px;
    --cometchat-video-bubble-play-overlay-size: 48px;

    --cometchat-audio-bubble-min-width: 240px;
    --cometchat-audio-bubble-max-width: 240px;

    --cometchat-file-bubble-min-width: 240px;
    --cometchat-file-bubble-max-width: 240px;
  }
}