[data-chat-interface-theme="opaque"] #chat-log ~ *,
[data-theme="opaque"]:not([data-color-scheme]) {
  --dui-button-background: rgb(30, 30, 30);
  --app-background: rgb(30, 30, 30);
  --app-border-color: rgb(80, 80, 80);
  --app-border-width: 1px;

  --window-app-background: rgb(30, 30, 30);
  --window-app-border-width: 1px;
  --window-app-border-color: rgb(80, 80, 80);

  --input-box-shadow: none;
  --dui-input-border-color: var(--dui-button-border-color); // intentional
  --dui-input-text-color: black;
  --dui-input-focus-text-color: black;
  --dui-input-background: rgba(255, 255, 255, 0.5);
  --dui-input-focus-outline-color: var(--primary-light);
  --dui-input-placeholder-color: rgba(0, 0, 0, 0.5);

  --color-primary-1: var(--tertiary);
  --color-primary-2: var(--primary-light);
  --color-primary-3: var(--primary-dark);
  --color-primary-3-75: var(--color-primary-3);
  --color-primary-4-75: var(--color-primary-4);
  --color-secondary-1: var(--secondary-light);
  --color-secondary-2: var(--secondary);
  --color-secondary-3: var(--secondary-dark);
  --color-secondary-3-75: var(--color-secondary-3); //custom

  --dui-button-background: var(--app-background);
  --dui-button-border-color: var(--app-border-color);
  --dui-button-text-color: var(--text-color-3);
  --dui-button-focus-outline-color: var(--tertiary);
  --button-hover-background: var(--primary-light);
  --button-hover-border-color: var(--tertiary);
  --dui-button-hover-text-color: var(--text-color-1);
  --button-disabled-background: var(--color-primary-5);
  --button-disabled-border-color: var(--color-primary-4);
  --button-bright-text-color: white;

  --button-toggle-border-color: var(--secondary-light);
  --button-toggle-hover-border-color: color-mix(in srgb, var(--secondary) 50%, white 50%);
  --button-toggle-background: color-mix(in srgb, var(--secondary) 50%, black 50%);
  --button-toggle-hover-background: var(--secondary-light);

  --scrollbar-thumb-background: var(--bg3-scrollbar-thumb-background);
  --scrollbar-thumb-border-color: var(--bg3-scrollbar-thumb-border-color);
  --color-scrollbar-hover: var(--bg3-color-scrollbar-highlight);

  /* Inline variables */
  --inline-background: #303030;
  --inline-border-color: #404040;
  --inline-text-color: var(--text-color-2);
  --inline-icon-color: var(--text-color-1);
  --inline-box-shadow: 0px 1px 2px black;

  --accent-color: var(--primary-light);
  --icon-border-color: var(--tertiary);

  --color-border-light-primary: var(--app-border-color);
  --color-border-light-highlight: var(--app-border-color);

  &#token-hud {
    --dui-input-text-color: var(--text-color-2);
    .attribute i.fas {
      color: var(--text-color-2);
    }
  }

  &#pf2e-hud-persistent-main .group.stretch .bottom .shortcuts .shortcut-group .shortcut.empty {
    background: rgb(55, 55, 55) !important;
  }

  &.sidebar-popout {
    background: var(--app-background);
    border: var(--app-border-width);
    border-color: var(--app-border-color);
  }
}

/* ----------------------------------------- */
/* Controls                                  */
/* ----------------------------------------- */
[data-dorako-ui-scope="controls"][data-theme="opaque"] {
  --button-toggle-border-color: var(--secondary-light);
  --button-toggle-hover-border-color: color-mix(in srgb, var(--secondary) 50%, white 50%);
  --button-toggle-background: color-mix(in srgb, var(--secondary) 50%, black 50%);
  --button-toggle-hover-background: var(--secondary-light);
}

/* ----------------------------------------- */
/* Chatlog                                   */
/* ----------------------------------------- */
[data-chat-interface-theme="opaque"] {
  #sidebar-tabs {
    --app-border-width: 1px solid;
    --button-hover-background: var(--primary-light);
    --button-hover-border-color: #d3b87c;
  }
}

/* ----------------------------------------- */
/* Navigation                                */
/* ----------------------------------------- */
[data-dorako-ui-scope="navigation"][data-theme="opaque"] {
  .scene {
    --button-toggle-focus-outline-color: var(--discord-attention);
  }

  .scene:not(.gm) {
    --button-toggle-border-color: var(--app-border-color);
    --button-toggle-hover-border-color: color-mix(in srgb, var(--primary-light) 50%, white 50%);
    --button-toggle-background: var(--app-background);
    --button-toggle-hover-background: var(--primary-light);
  }

  .scene.gm {
    --button-toggle-border-color: var(--secondary-light);
    --button-toggle-hover-border-color: color-mix(in srgb, var(--secondary) 50%, white 50%);
    --button-toggle-background: color-mix(in srgb, var(--secondary) 50%, black 50%);
    --button-toggle-hover-background: var(--secondary-light);

    &.active:not(.view) {
      --button-toggle-focus-outline-color: transparent;
    }
  }
}
