/* stylelint-disable docusaurus/copyright-header */
/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #5485f7;
  --ifm-color-title: #111;
  --ifm-color-background: #fff;
  --ifm-color-border-color: rgba(208, 208, 208, 0.44);
  --ifm-color-area: #fafafa;
  /* --ifm-color-primary-dark: rgb(33, 175, 144);
  --ifm-color-primary-darker: rgb(31, 165, 136);
  --ifm-color-primary-darkest: rgb(26, 136, 112);
  --ifm-color-primary-light: rgb(70, 203, 174);
  --ifm-color-primary-lighter: rgb(102, 212, 189);
  --ifm-color-primary-lightest: rgb(146, 224, 208); */
  --ifm-code-font-size: 95%;
  --ifm-container-width-xl: 1600px;
  --ifm-footer-title-color: #fff;
  /* --ifm-container-width: 1140 */

  --site-primary-hue-saturation: 167, 68%;
  --site-primary-hue-saturation-light: 167, 56%; /* do we really need this extra one? */
}

:root[data-theme='dark'] {
  --ifm-color-title: #fff;
  --ifm-color-background: #2a2d31;
  --ifm-color-border-color: rgba(149, 149, 149, 0.27);
  --ifm-color-area: #242527;
  --ifm-footer-title-color: #fff;

  --ice-users-fill-filter: drop-shadow(0 40px rgba(255, 255, 255, .72));
  --ice-users-fill-transform: translateY(-40px);
}

.docusaurus-highlight-code-line {
  background-color: rgb(72, 77, 91);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

.navbar__title {
  font-size: 22px;
  margin-left: 4px;
}

.navbar__logo {
  height: 50px;
}

.navbar__search-input:focus {
  outline: none;
}

div[class^='announcementBar_'] {
  --site-announcement-bar-stripe-color1: hsl(
    var(--site-primary-hue-saturation),
    85%
  );
  --site-announcement-bar-stripe-color2: hsl(
    var(--site-primary-hue-saturation),
    95%
  );
  background: repeating-linear-gradient(
    35deg,
    var(--site-announcement-bar-stripe-color1),
    var(--site-announcement-bar-stripe-color1) 20px,
    var(--site-announcement-bar-stripe-color2) 10px,
    var(--site-announcement-bar-stripe-color2) 40px
  );
  font-weight: bold;
}

.menu__link--sublist-caret:after {
  background-size: 1.3rem 1.3rem;
}