:root {
  --global-background: #FFFFFF;
  --global-color: #2A2B2E;
  --global-focus-border-color: #2088FF;
  --global-focus-box-shadow: 0 0 0 2px rgba(32, 136, 255, 0.3);

  --item-hover-background: #F6F7F7;
  --item-selected-background: #EAEBEB;

  --item-padding: 10px 15px;
  --item-padding-left-right: 20px;

  --button-normal-background: #FFFFFF;
  --button-hover-background: #FAFAFA;
  --button-active-background: #D6E1EF;

  --button-normal-border-color: #DADCE0;
  --button-hover-border-color: #D7D9DD;
  --button-active-border-color: #C5D2E3;

  /* Less padding on top to optically align in the center. */
  --button-padding: 7px 15px 8px;
  --button-padding-left-right: 15px;
  --button-font-size: 13px;
  --button-normal-color: #2C7CEA;
  --button-hover-color: #1D74E9;
  --button-active-color: #1D74E9;
  --button-danger-color: #C5392A;

  --input-normal-background: #FFFFFF;
  --input-hover-background: #F2F2F2;
  --input-normal-color: #2A2B2E;
  --input-normal-border-color: #B1B1B1;
  --input-placeholder-color: #757575;

  --icon-normal-fill: #5F6369;

  --toolbar-border-color: #E1E3E6;

  --list-heading-background: var(--global-background);
  --list-heading-color: #5F6368;
  --list-heading-border-color: #DADCE0;

  --toast-background: #303030;
  --toast-color: #F2F2F2;
  --toast-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28);
  --toast-action-color: #A8C7FA;
  --toast-action-active-background: #363B46;
  --toast-action-focus-border-color: #2088FF;
  --toast-action-focus-box-shadow: 0 0 0 1px rgba(32, 136, 255, 1);

  --context-menu-shadow: 0 2px 6px #9E9E9E;
  --context-menu-background: #FFFFFF;
  --context-menu-item-hover-background: var(--item-selected-background);
  --context-menu-item-color: var(--global-color);

  --scrollbar-thumb-color: #5F6369;
  --scrollbar-track-color: #FFFFFF;

  --toggle-track-normal-background: #E1E3E1;
  --toggle-track-checked-background: #0A57D0;

  --toggle-track-normal-border-color: #757775;
  --toggle-track-checked-border-color: #0A57D0;

  --toggle-knob-normal-background: #757775;
  --toggle-knob-hover-background: #C8D7F0;
  --toggle-knob-checked-background: #FFFFFF;
}

@media(prefers-color-scheme: dark) {
  :root {
    --global-background: #1F1F1F;
    --global-color: #E1E1E1;
    --global-focus-border-color: #729CEF;
    --global-focus-box-shadow: 0 0 0 1px #729CEF;

    --item-hover-background: #2F2F2F;
    --item-selected-background: #363636;

    --button-normal-background: #1F1F1F;
    --button-hover-background: #303339;
    --button-active-background: #363B46;

    --button-normal-border-color: #5F6368;
    --button-hover-border-color: #636971;
    --button-active-border-color: #646C78;

    --button-normal-color: #8DB8FE;
    --button-hover-color: #8DB8FE;
    --button-active-color: #85AAE9;
    --button-danger-color: #F28B82;

    --input-normal-background: #1F1F1F;
    --input-hover-background: #363636;
    --input-normal-color: #E1E1E1;
    --input-normal-border-color: #5F6368;
    --input-placeholder-color: #919191;

    --icon-normal-fill: #C7C7C7;

    --toolbar-border-color: #393D40;

    --list-heading-background: var(--global-background);
    --list-heading-color: #9AA0A6;
    --list-heading-border-color: #363636;

    --toast-background: #FFFFFF;
    --toast-color: #1F1F1F;
    --toast-action-color: #0A57D0;
    --toast-action-active-background: transparent;

    --context-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0, rgba(0, 0, 0, .15) 0 3px 6px 2px;
    --context-menu-background: #262626;
    --context-menu-item-hover-background: var(--item-selected-background);
    --context-menu-item-color: var(--global-color);

    --scrollbar-thumb-color: #C7C7C7;
    --scrollbar-track-color: #1F1F1F;

    --toggle-track-normal-background: #454746;
    --toggle-track-checked-background: #A8C7FA;

    --toggle-track-normal-border-color: #8F918F;
    --toggle-track-checked-border-color: #A8C7FA;

    --toggle-knob-normal-background: #8F918F;
    --toggle-knob-hover-background: #2755AA;
    --toggle-knob-checked-background: #062E6F;
  }
}

body {
  background-color: var(--global-background);
  color: var(--global-color);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 13px;
  overflow: hidden;
}
