:root {
  --color-text-aside: #509ee3;
}

* {
  box-sizing: border-box;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-background: #fafbfe;
    --color-background-secondary: #fff;
    --color-accent: #e8e8e8;
  }

  :root:not([data-theme="dark"]) .tsd-signature {
    /**
      To display code in code-blocks with the same colors both on light and dark themes
    */
    --color-ts-keyword: var(--dark-color-ts-keyword);
    --color-ts-project: var(--dark-color-ts-project);
    --color-ts-module: var(--dark-color-ts-module);
    --color-ts-namespace: var(--dark-color-ts-namespace);
    --color-ts-enum: var(--dark-color-ts-enum);
    --color-ts-enum-member: var(--dark-color-ts-enum-member);
    --color-ts-variable: var(--dark-color-ts-variable);
    --color-ts-function: var(--dark-color-ts-function);
    --color-ts-class: var(--dark-color-ts-class);
    --color-ts-interface: var(--dark-color-ts-interface);
    --color-ts-constructor: var(--dark-color-ts-constructor);
    --color-ts-property: var(--dark-color-ts-property);
    --color-ts-method: var(--dark-color-ts-method);
    --color-ts-reference: var(--dark-color-ts-reference);
    --color-ts-call-signature: var(--dark-color-ts-call-signature);
    --color-ts-index-signature: var(--dark-color-ts-index-signature);
    --color-ts-constructor-signature: var(
      --dark-color-ts-constructor-signature
    );
    --color-ts-parameter: var(--dark-color-ts-parameter);
    --color-ts-type-parameter: var(--dark-color-ts-type-parameter);
    --color-ts-accessor: var(--dark-color-ts-accessor);
    --color-ts-get-signature: var(--dark-color-ts-get-signature);
    --color-ts-set-signature: var(--dark-color-ts-set-signature);
    --color-ts-type-alias: var(--dark-color-ts-type-alias);

    --color-link: var(--dark-color-link);
    --external-icon: var(--dark-external-icon);
  }
}

:root[data-theme='light'] {
  --color-background: #fafbfe;
  --color-background-secondary: #fff;
  --color-accent: #e8e8e8;
}

:root[data-theme='light'] .tsd-signature {
  /**
    To display code in code-blocks with the same colors both on light and dark themes
  */
  --color-ts-keyword: var(--dark-color-ts-keyword);
  --color-ts-project: var(--dark-color-ts-project);
  --color-ts-module: var(--dark-color-ts-module);
  --color-ts-namespace: var(--dark-color-ts-namespace);
  --color-ts-enum: var(--dark-color-ts-enum);
  --color-ts-enum-member: var(--dark-color-ts-enum-member);
  --color-ts-variable: var(--dark-color-ts-variable);
  --color-ts-function: var(--dark-color-ts-function);
  --color-ts-class: var(--dark-color-ts-class);
  --color-ts-interface: var(--dark-color-ts-interface);
  --color-ts-constructor: var(--dark-color-ts-constructor);
  --color-ts-property: var(--dark-color-ts-property);
  --color-ts-method: var(--dark-color-ts-method);
  --color-ts-reference: var(--dark-color-ts-reference);
  --color-ts-call-signature: var(--dark-color-ts-call-signature);
  --color-ts-index-signature: var(--dark-color-ts-index-signature);
  --color-ts-constructor-signature: var(
    --dark-color-ts-constructor-signature
  );
  --color-ts-parameter: var(--dark-color-ts-parameter);
  --color-ts-type-parameter: var(--dark-color-ts-type-parameter);
  --color-ts-accessor: var(--dark-color-ts-accessor);
  --color-ts-get-signature: var(--dark-color-ts-get-signature);
  --color-ts-set-signature: var(--dark-color-ts-set-signature);
  --color-ts-type-alias: var(--dark-color-ts-type-alias);

  --color-link: var(--dark-color-link);
  --external-icon: var(--dark-external-icon);
}

.tsd-toolbar-contents > .title::before {
  content: "";
  display: inline-block;
  background-image: url('/images/logo.svg');
  background-size: contain;
  background-repeat: no-repeat;
  height: 36px;
  width: 36px;
  margin-right: 8px;
  vertical-align: middle;
}

.tsd-kind-icon ~ span,
.tsd-breadcrumb a,
.tsd-navigation a,
.tsd-page-toolbar a {
  color: var(--color-text-aside);
  font-weight: bold;
}

.tsd-signature {
  background: #12436e;
  border-radius: .75rem;
  color: #fff;
  font-family: "Roboto Mono", monospace;
  padding: 1.5rem;
  white-space: unset;
}

@media (max-width: 769px) {
  #tsd-toolbar-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}