@layer common {
  [data-style-id] {
    /* Base Colors */
    --base-colors-light: #fff;
    --base-colors-dark: #000;

    --base-colors-accent-primary: #000;
    --base-colors-accent-secondary: #000;

    --base-colors-border: var(--base-colors-blackAlpha-50);
    --base-colors-overlay: #000;

    --base-colors-default-background-color: #9eaec5;
    --base-colors-default-font-color: var(--base-colors-blackAlpha-900);

    --base-colors-success-background-color: #71a87b;
    --base-colors-success-font-color: var(--base-colors-whiteAlpha-900);

    --base-colors-success__light-background-color: #98cda1;
    --base-colors-success__light-font-color: #000;

    --base-colors-error-background-color: #e25353;
    --base-colors-error-font-color: var(--base-colors-whiteAlpha-900);

    --base-colors-error__light-background-color: #e39494;
    --base-colors-error__light-font-color: #000;

    --base-colors-warning-background-color: #cbbd75;
    --base-colors-warning-font-color: var(--base-colors-blackAlpha-900);

    --base-colors-highlight-background-color: #e19814;
    --base-colors-highlight-font-color: var(--base-colors-blackAlpha-900);

    --base-colors-info-background-color: #59698e;
    --base-colors-info-font-color: var(--base-colors-blackAlpha-900);

    --base-colors-scrollbar-track: var(
      --base-colors-brand-400-background-color,
      var(--base-colors-blackAlpha-100)
    );
    --base-colors-scrollbar-thumb: var(
      --base-colors-accent-primary-background-color,
      var(--base-colors-blackAlpha-1000)
    );

    --base-colors-hover-background-color: var(--base-colors-blackAlpha-50);

    --base-colors-status__not-started: var(--base-colors-blackAlpha-100);
    --base-colors-status__played: var(--base-colors-blackAlpha-900);

    /* WhiteAlpha */
    --base-colors-whiteAlpha-50: rgb(from var(--base-colors-light) r g b / 4%);
    --base-colors-whiteAlpha-100: rgb(from var(--base-colors-light) r g b / 6%);
    --base-colors-whiteAlpha-200: rgb(from var(--base-colors-light) r g b / 8%);
    --base-colors-whiteAlpha-300: rgb(
      from var(--base-colors-light) r g b / 16%
    );
    --base-colors-whiteAlpha-400: rgb(
      from var(--base-colors-light) r g b / 24%
    );
    --base-colors-whiteAlpha-500: rgb(
      from var(--base-colors-light) r g b / 36%
    );
    --base-colors-whiteAlpha-600: rgb(
      from var(--base-colors-light) r g b / 48%
    );
    --base-colors-whiteAlpha-700: rgb(
      from var(--base-colors-light) r g b / 64%
    );
    --base-colors-whiteAlpha-800: rgb(
      from var(--base-colors-light) r g b / 80%
    );
    --base-colors-whiteAlpha-900: rgb(
      from var(--base-colors-light) r g b / 92%
    );
    --base-colors-whiteAlpha-1000: rgb(
      from var(--base-colors-light) r g b / 100%
    );

    /* BlackAlpha */
    --base-colors-blackAlpha-50: rgb(from var(--base-colors-dark) r g b / 4%);
    --base-colors-blackAlpha-100: rgb(from var(--base-colors-dark) r g b / 6%);
    --base-colors-blackAlpha-200: rgb(from var(--base-colors-dark) r g b / 8%);
    --base-colors-blackAlpha-300: rgb(from var(--base-colors-dark) r g b / 16%);
    --base-colors-blackAlpha-400: rgb(from var(--base-colors-dark) r g b / 24%);
    --base-colors-blackAlpha-500: rgb(from var(--base-colors-dark) r g b / 36%);
    --base-colors-blackAlpha-600: rgb(from var(--base-colors-dark) r g b / 48%);
    --base-colors-blackAlpha-700: rgb(from var(--base-colors-dark) r g b / 64%);
    --base-colors-blackAlpha-800: rgb(from var(--base-colors-dark) r g b / 80%);
    --base-colors-blackAlpha-900: rgb(from var(--base-colors-dark) r g b / 92%);
    --base-colors-blackAlpha-1000: rgb(
      from var(--base-colors-dark) r g b / 100%
    );

    /* Accent Primary */
    --base-colors-accent-primary-background-color: var(
      --base-colors-accent-primary
    );
    --base-colors-accent-primary-border-color: var(
      --base-colors-accent-primary
    );
    --base-colors-accent-primary-font-color: var(--base-colors-whiteAlpha-900);

    /* Accent Secondary */
    --base-colors-accent-secondary-background-color: var(
      --base-colors-accent-secondary
    );
    --base-colors-accent-secondary-border-color: var(
      --base-colors-accent-secondary
    );
    --base-colors-accent-secondary-font-color: var(
      --base-colors-whiteAlpha-900
    );

    /* Default */
    --base-matchevent-default-background-color: var(
      --base-colors-tint-100,
      var(--base-colors-whiteAlpha-700)
    );
    --base-matchevent-default-border-color: var(
      --base-colors-default-background-color
    );
    --base-matchevent-default-font-color: var(
      --base-colors-default-background-color
    );

    /* Success */
    --base-matchevent-success-background-color: var(
      --base-colors-tint-100,
      var(--base-colors-whiteAlpha-700)
    );
    --base-matchevent-success-border-color: var(
      --base-colors-success-background-color
    );
    --base-matchevent-success-font-color: var(
      --base-colors-success-background-color
    );

    /* Error */
    --base-matchevent-error-background-color: var(
      --base-colors-tint-100,
      var(--base-colors-whiteAlpha-700)
    );
    --base-matchevent-error-border-color: var(
      --base-colors-error-background-color
    );
    --base-matchevent-error-font-color: var(
      --base-colors-error-background-color
    );

    /* Warning */
    --base-matchevent-warning-background-color: var(
      --base-colors-tint-100,
      var(--base-colors-whiteAlpha-700)
    );
    --base-matchevent-warning-border-color: var(
      --base-colors-warning-background-color
    );
    --base-matchevent-warning-font-color: var(
      --base-colors-warning-background-color
    );

    /* Highlight */
    --base-matchevent-highlight-background-color: var(
      --base-colors-tint-100,
      var(--base-colors-whiteAlpha-700)
    );
    --base-matchevent-highlight-border-color: var(
      --base-colors-highlight-background-color
    );
    --base-matchevent-highlight-font-color: var(
      --base-colors-highlight-background-color
    );

    /* Info */
    --base-matchevent-info-background-color: var(
      --base-colors-tint-100,
      var(--base-colors-whiteAlpha-700)
    );
    --base-matchevent-info-border-color: var(
      --base-colors-info-background-color
    );
    --base-matchevent-info-font-color: var(--base-colors-info-background-color);

    /* Overlay */
    --base-colors-overlay-background-color: rgb(
      from var(--base-colors-overlay) r g b / 85%
    );
    --base-colors-overlay-font-color: var(--base-colors-whiteAlpha-900);

    /* Status Not Started */
    --base-colors-status__not-started-background-color: var(
      --base-colors-status__not-started
    );
    --base-colors-status__not-started-border-color: transparent;
    --base-colors-status__not-started-font-color: var(
      --base-colors-blackAlpha-900
    );

    /* Status Played */
    --base-colors-status__played-background-color: var(
      --base-colors-status__played
    );
    --base-colors-status__played-border-color: transparent;
    --base-colors-status__played-font-color: var(--base-colors-whiteAlpha-900);

    /* Button */
    --base-button-background-color: var(--base-colors-whiteAlpha-900);
    --base-button-border-color: transparent;
    --base-button-font-color: var(--base-colors-blackAlpha-900);

    --base-button-background-color__hover: var(--base-colors-blackAlpha-900);
    --base-button-border-color__hover: transparent;
    --base-button-font-color__hover: var(--base-colors-whiteAlpha-900);

    --base-button-background-color__active: var(--base-colors-blackAlpha-900);
    --base-button-border-color__active: transparent;
    --base-button-font-color__active: var(--base-colors-whiteAlpha-900);

    /* Tab */
    --base-tab-background-color: var(
      --base-colors-tint-100 var(--brand-colors-whiteAlpha-1000)
    );
    --base-tab-border-color: var(--base-colors-border);
    --base-tab-font-color: var(--base-colors-blackAlpha-900);

    --base-tab-background-color__hover: transparent;
    --base-tab-border-color__hover: var(--base-colors-blackAlpha-500);
    --base-tab-font-color__hover: var(--base-colors-blackAlpha-900);

    --base-tab-background-color__active: transparent;
    --base-tab-border-color__active: var(--base-colors-blackAlpha-900);
    --base-tab-font-color__active: var(--base-colors-blackAlpha-900);

    /* Switch */
    --base-switch-thumb-background-color: var(--base-colors-whiteAlpha-900);
    --base-switch-track-background-color: var(--base-colors-blackAlpha-900);
    --base-switch-track-background-color__active: var(
      --base-colors-success-font-color
    );

    /***********************************************************/

    --ntb-base-light: 255, 255, 255;
    --ntb-base-dark: 0, 0, 0;

    --ntb-colors-whiteAlpha-50: rgba(var(--ntb-base-light), 0.04);
    --ntb-colors-whiteAlpha-100: rgba(var(--ntb-base-light), 0.06);
    --ntb-colors-whiteAlpha-200: rgba(var(--ntb-base-light), 0.08);
    --ntb-colors-whiteAlpha-300: rgba(var(--ntb-base-light), 0.16);
    --ntb-colors-whiteAlpha-400: rgba(var(--ntb-base-light), 0.24);
    --ntb-colors-whiteAlpha-500: rgba(var(--ntb-base-light), 0.36);
    --ntb-colors-whiteAlpha-600: rgba(var(--ntb-base-light), 0.48);
    --ntb-colors-whiteAlpha-700: rgba(var(--ntb-base-light), 0.64);
    --ntb-colors-whiteAlpha-800: rgba(var(--ntb-base-light), 0.8);
    --ntb-colors-whiteAlpha-900: rgba(var(--ntb-base-light), 0.92);

    --ntb-colors-blackAlpha-50: rgba(var(--ntb-base-dark), 0.04);
    --ntb-colors-blackAlpha-100: rgba(var(--ntb-base-dark), 0.06);
    --ntb-colors-blackAlpha-200: rgba(var(--ntb-base-dark), 0.08);
    --ntb-colors-blackAlpha-300: rgba(var(--ntb-base-dark), 0.16);
    --ntb-colors-blackAlpha-400: rgba(var(--ntb-base-dark), 0.24);
    --ntb-colors-blackAlpha-500: rgba(var(--ntb-base-dark), 0.36);
    --ntb-colors-blackAlpha-600: rgba(var(--ntb-base-dark), 0.48);
    --ntb-colors-blackAlpha-700: rgba(var(--ntb-base-dark), 0.64);
    --ntb-colors-blackAlpha-800: rgba(var(--ntb-base-dark), 0.8);
    --ntb-colors-blackAlpha-900: rgba(var(--ntb-base-dark), 0.92);

    --ntb-colors-action-bg: #e2e8f0;
    --ntb-colors-action-bg-hover: #718096;
    --ntb-colors-action-bg-active: #2d3748;
    --ntb-colors-action-border: #e2e8f0;
    --ntb-colors-action-border-hover: #718096;
    --ntb-colors-action-border-active: #718096;
    --ntb-colors-action-font: #171923;
    --ntb-colors-action-font-hover: #171923;
    --ntb-colors-action-font-active: #fff;

    --ntb-colors-accent-50: #f7fafc;
    --ntb-colors-accent-100: #edf2f7;
    --ntb-colors-accent-200: #e2e8f0;
    --ntb-colors-accent-300: #cbd5e0;
    --ntb-colors-accent-400: #a0aec0;
    --ntb-colors-accent-500: #718096;
    --ntb-colors-accent-600: #4a5568;
    --ntb-colors-accent-700: #2d3748;
    --ntb-colors-accent-800: #1a202c;
    --ntb-colors-accent-900: #171923;

    --ntb-colors-success-light: #48bb78;
    --ntb-colors-success-default: #38a169;
    --ntb-colors-success-dark: #22543d;

    --ntb-colors-error-light: #f56565;
    --ntb-colors-error-default: #e53e3e;
    --ntb-colors-error-dark: #c53030;

    --ntb-colors-warning-light: #ecc94b;
    --ntb-colors-warning-default: #d69e2e;
    --ntb-colors-warning-dark: #b7791f;

    --ntb-colors-alert-light: #ed8936;
    --ntb-colors-alert-default: #dd6b20;
    --ntb-colors-alert-dark: #c05621;

    --ntb-colors-info-light: #4299e1;
    --ntb-colors-info-default: #3182ce;
    --ntb-colors-info-dark: #2b6cb0;

    --ntb-radii-none: 0;
    --ntb-radii-sm: 0.125rem;
    --ntb-radii-base: 0.25rem;
    --ntb-radii-md: 0.375rem;
    --ntb-radii-lg: 0.5rem;
    --ntb-radii-xl: 0.75rem;
    --ntb-radii-2xl: 1rem;
    --ntb-radii-3xl: 1.5rem;
    --ntb-radii-full: 9999px;

    --ntb-fonts-body: 'inherit';
    --chakra-fonts-body: 'inherit';
    --ntb-colors-body-text: var(--ntb-colors-blackAlpha-900);
    --ntb-colors-body-text-inverted: var(--ntb-colors-whiteAlpha-900);

    --ntb-fontSizes-3xs: 0.45rem;
    --ntb-fontSizes-2xs: 0.625rem;
    --ntb-fontSizes-xs: 0.75rem;
    --ntb-fontSizes-sm: 0.875rem;
    --ntb-fontSizes-md: 1rem;
    --ntb-fontSizes-lg: 1.125rem;
    --ntb-fontSizes-xl: 1.25rem;
    --ntb-fontSizes-2xl: 1.5rem;
    --ntb-fontSizes-3xl: 1.875rem;
    --ntb-fontSizes-4xl: 2.25rem;
    --ntb-fontSizes-5xl: 3rem;
    --ntb-fontSizes-6xl: 3.75rem;
    --ntb-fontSizes-7xl: 4.5rem;
    --ntb-fontSizes-8xl: 6rem;
    --ntb-fontSizes-9xl: 8rem;

    --ntb-fontWeights-hairline: 100;
    --ntb-fontWeights-thin: 200;
    --ntb-fontWeights-light: 300;
    --ntb-fontWeights-normal: 400;
    --ntb-fontWeights-medium: 500;
    --ntb-fontWeights-semibold: 600;
    --ntb-fontWeights-bold: 700;
    --ntb-fontWeights-extrabold: 800;
    --ntb-fontWeights-black: 900;

    --ntb-space-1: 0.25rem;
    --ntb-space-2: 0.5rem;
    --ntb-space-3: 0.75rem;
    --ntb-space-4: 1rem;
    --ntb-space-5: 1.25rem;
    --ntb-space-6: 1.5rem;
    --ntb-space-7: 1.75rem;
    --ntb-space-8: 2rem;
    --ntb-space-9: 2.25rem;
    --ntb-space-10: 2.5rem;
    --ntb-space-12: 3rem;
    --ntb-space-14: 3.5rem;
    --ntb-space-16: 4rem;
    --ntb-space-20: 5rem;
    --ntb-space-24: 6rem;
    --ntb-space-28: 7rem;
    --ntb-space-32: 8rem;
    --ntb-space-36: 9rem;
    --ntb-space-40: 10rem;
    --ntb-space-44: 11rem;
    --ntb-space-48: 12rem;
    --ntb-space-52: 13rem;
    --ntb-space-56: 14rem;
    --ntb-space-60: 15rem;
    --ntb-space-64: 16rem;
    --ntb-space-72: 18rem;
    --ntb-space-80: 20rem;
    --ntb-space-96: 24rem;
    --ntb-space-px: 1px;
    --ntb-space-0-5: 0.125rem;
    --ntb-space-1-5: 0.375rem;
    --ntb-space-2-5: 0.625rem;
    --ntb-space-3-5: 0.875rem;
  }

  [data-theme][data-theme='dark'] [data-style-id],
  .darkmode [data-style-id] {
    --base-colors-light: #141414;
    --base-colors-dark: #d4d4d4;
    --chakra-colors-chakra-body-bg: #000;

    --lightness: 0%;

    --base-colors-accent-primary: #000;
    --base-colors-accent-secondary: #000;

    /* Accent Primary */
    --base-colors-accent-primary-font-color: var(--base-colors-blackAlpha-900);

    /* Overlay */
    --base-colors-overlay-font-color: var(--base-colors-blackAlpha-900);

    /* Scrollbar Thumb*/
    --base-colors-scrollbar-thumb: var(--base-colors-blackAlpha-600);
  }

  /* Scrollbar */
  .scrollbar::-webkit-scrollbar-track {
    border-radius: var(--ntb-radii-md);
    background-color: var(--base-colors-scrollbar-track);
  }

  .scrollbar::-webkit-scrollbar {
    width: 8px;
  }

  .scrollbar::-webkit-scrollbar-thumb {
    border-radius: var(--ntb-radii-md);
    background-color: var(--base-colors-scrollbar-thumb);
  }

  /* Other */
  .react-horizontal-scrolling-menu--inner-wrapper {
    overflow: hidden;
    display: flex;
    flex-direction: row;
  }

  .react-horizontal-scrolling-menu--scroll-container {
    display: flex;
    flex-direction: row;
    overflow: hidden;
  }
}