:root {
  --light-gray-0: #fff;
  --light-gray-200: #f5f5f5;
  --light-gray-200: #f5f5f5;
  --light-gray-400: #ccc;
  --light-gray-900: #000;

  --light-blue-400: #304ffe;

  --light-green-350: #1e9765;

  --light-red-400: #be3436;

  --dark-gray-0: #000;
  --dark-gray-200: #141315;
  --dark-gray-400: #272727;
  --dark-gray-500: #696969;
  --dark-gray-900: #fff;

  --dark-blue-400: #4571ec;

  --dark-green-350: #17714b;

  --dark-red-400: #fc5f6a;
}

/* Scale toggle aside button by device */
@media (hover: none) and (pointer: coarse) {
  [data-name='toolbar-drawing-toggle-button'] {
    width: 18px;
    height: 40px;
  }

  [data-name='toolbar-drawing-toggle-button'] svg {
    width: 100%;
    height: auto;
  }
}

/* Overrides vars must be used from - https://www.tradingview.com/charting-library-docs/latest/customization/styles/CSS-Color-Themes */

:root:not(.theme-dark) {
  --tv-color-platform-background: var(--light-gray-0);

  --tv-color-pane-background: var(--light-gray-0);

  --tv-color-toolbar-button-text: var(--light-gray-900);
  --tv-color-toolbar-button-text-active: var(--light-blue-400);

  --tv-color-toolbar-divider-background: var(--light-gray-0);

  --tv-color-toolbar-toggle-button-background-active: var(--light-gray-400);
  --tv-color-toolbar-toggle-button-background-active-hover: var(--light-gray-400);

  --tv-color-popup-element-background-active: var(--light-blue-400);
}

.theme-dark:root {
  --tv-color-platform-background: var(--dark-gray-0);

  --tv-color-pane-background: var(--dark-gray-0);

  --tv-color-toolbar-button-text: var(--dark-gray-900);
  --tv-color-toolbar-button-text-active: var(--dark-blue-400);

  --tv-color-toolbar-divider-background: var(--dark-gray-0);

  --tv-color-toolbar-toggle-button-background-active: var(--dark-gray-400);
  --tv-color-toolbar-toggle-button-background-active-hover: var(--dark-gray-400);

  --tv-color-popup-element-background-active: var(--dark-blue-400);
}

/* Hide from legend additional data, leaving only the loader */
[class*='legend'] [class*='noWrapWrapper-'] {
  display: none;
}

[class*='legend'] [class*='mainTitle-'] {
  display: none;
}

[class*='legend'] [class*='title-'] {
  display: none;
}

[class*='legend'] [class*='valuesAdditionalWrapper-'] {
  display: none !important;
}

[class*='legend'] [class*='togglerWrapper-'] {
  display: none !important;
}