/* This css file is used for theme. See basic.css for layout. */

:root {
  /* Fonts */
  --ndg-font-normal: "Roboto", sans-serif;
  --ndg-font-condensed: "Roboto Condensed", sans-serif;
  --ndg-font-mono: "Roboto Mono", monospace;
  --ndg-font-awesome: "Font Awesome 5 Pro"; /* License by NDG */

  --ndg-content-width: 72rem;

  color-scheme: var(--color-scheme, light dark);

  /* Color Palette */
  --ndg-mid-blue: #005C99;
  --ndg-mid-blue-dm: #35aaf7;
  --ndg-light-blue: #D6EEFF;
  --ndg-mid-green: #21B89B; /* #1ABC9C; */
  --ndg-light-green: #DBFAF4;
  --ndg-mid-orange: #ff7e32;
  --ndg-light-orange: #FFEBEB;
  --ndg-mid-red: #E81224;
  --ndg-light-red: #FCE4EC;

  /* Brand colors */
  --ndg-brand-blue: var(--ndg-mid-blue);
  --ndg-brand-background: var(--ndg-brand-blue);
  --ndg-brand-color: white;

  /* Primary text colors */
  --ndg-light-text-color: #3A383F;
  --ndg-dark-text-color: #ffffff;
  --ndg-text-color: light-dark(var(--ndg-light-text-color), var(--ndg-dark-text-color));

  /* Backround colors */
  --ndg-body-background: light-dark(#F2F7FA, #1A1E2D);
  --ndg-accent-background: var(--ndg-body-background);

  /* Heading colors */
  --ndg-heading-background: var(--ndg-accent-background);
  --ndg-heading-color: light-dark(var(--ndg-mid-blue), var(--ndg-mid-blue-dm));

  /* Border colors */
  --ndg-border: light-dark(#CCCCCC, #313234);

    /* Sidebar colors */
  --ndg-sidebar-background: var(--ndg-accent-background);
  --ndg-sidebar-color: var(--ndg-text-color);
  --ndg-sidebar-link-color: var(--ndg-heading-color);
  --ndg-sidebar-active: light-dark(var(--ndg-light-blue), #0f1428);

  /* Document colors */
  --ndg-content-background: light-dark(white, black);
  --ndg-content-color: var(--ndg-text-color);

  /* Links */
  --ndg-link-color: var(--ndg-mid-green);

  /* Button colors */
  --ndg-button-blue: var(--ndg-mid-blue);
  --ndg-button-green: #16A085;
  --ndg-button-red: var(--ndg-mid-red);
  --ndg-button-orange: var(--ndg-mid-orange);
  --ndg-button-gray: #656D78;
  --ndg-button-white: white;
  --ndg-button-help: #4AA3DF;

  /* Dragbar colors */
  --ndg-dragbar-background: var(--ndg-accent-background);

  /* Admonition Text Colors */
  --ndg-admonition-link-color: var(--ndg-mid-blue);
  
  /* Note Admonitions */
  --ndg-note-icon: "\f05a";
  --ndg-note-title-color: light-dark(var(--ndg-mid-blue), white);
  --ndg-note-background: light-dark(var(--ndg-light-blue), var(--ndg-mid-blue));
  --ndg-note-admonition-background: light-dark(#add9f8,#08395a);

  /* Tip Admonitions */
  --ndg-tip-icon: "\f0eb";
  --ndg-tip-title-color: light-dark(var(--ndg-mid-green), white);
  --ndg-tip-background: light-dark(var(--ndg-light-green), var(--ndg-mid-green));
  --ndg-tip-admonition-background: light-dark(#c0dfd9,#0d826c);

  /* Warning Admonitions */
  --ndg-warning-icon: "\f071";
  --ndg-warning-title-color: light-dark(var(--ndg-mid-orange), white);
  --ndg-warning-background: light-dark(var(--ndg-light-orange), var(--ndg-mid-orange));
  --ndg-warning-admonition-background: light-dark(#ffccae,#e55b0a);

  /* Danger Admonitions */
  --ndg-danger-icon: "\f06a";
  --ndg-danger-title-color: light-dark(var(--ndg-mid-red), white);
  --ndg-danger-background: light-dark(var(--ndg-light-red), var(--ndg-mid-red));
  --ndg-danger-admonition-background: light-dark(#ffb1cb,#ae1220);

  /* Footer colors */

  /* Nav button colors */
  --ndg-nav-button-background: var(--ndg-button-green);
  --ndg-nav-button-color: white;
  --ndg-nav-button-hover-background: var(--ndg-mid-blue);

  --sidebar-min-width: 25vw;
  --content-aside-margin: .4rem;
}

body {
  background-color: var(--ndg-accent-background);
  color: var(--ndg-text-color);
  font-family: var(--ndg-font-normal);
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ndg-heading-color);
}

a {
  color: var(--ndg-link-color);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &.reference.external::after {
    font-family: var(--ndg-font-awesome);
    content: " \f360";
    color: var(--ndg-link-color);
    text-decoration: none;
    font-size: .9em;
    vertical-align: baseline;
  }
}

img {
  margin: auto;
  max-width: 100%;
  margin: var(--content-aside-margin);

  &.inline-image {
    margin: 0;
    padding: 0;
    height: 1lh;
    vertical-align: middle;
  }
}

pre {
  font-family: var(--ndg-font-mono);
  font-size: 0.9em;
}

hr {
  height: 1px;
  border: 0;
  background: var(--ndg-border);
  margin-top: 1em;
  margin-bottom: 1em;
}

ul.tight-list p {
  margin: 0;
  padding: 0;
}

i.action {
  color: var(--ndg-heading-color);
}

.brand {
  font-size: 1.2em;
  font-weight: bold;
  background-color: var(--ndg-brand-background);
  color: var(--ndg-brand-color);

  & img {
    padding-right: .5em;
    height: 1.5rem;
    width: auto;
  }

  a {
    color: var(--ndg-brand-color);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.header {
  background-color: var(--ndg-sidebar-background);
  color: var(--ndg-heading-color);
  font-weight: bold;
  padding: .4em;
  border-left: 1px solid var(--ndg-border);
  border-bottom: 1px solid var(--ndg-border);

  .breadcrumbs {
    font-size: 1.0em;
  }
}

.sidebarwrapper {
  background-color: var(--ndg-sidebar-background);
}

.sidebar {
  background-color: var(--ndg-sidebar-background);
  color: var(--ndg-sidebar-color);

  a, a:after {
    /* color links, no underline */
    color: var(--ndg-sidebar-link-color) !important;
    text-decoration: none;

    &:hover {
      /* underline link on hover */
      text-decoration: underline;
    }
  }

  li a {
    /* bulleted links */
    font-family: var(--ndg-font-condensed);
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 4px;

    &.active {
      /* highlight sections that are visible in the content area */
      background-color: var(--ndg-sidebar-active);
    }
  }

  .toc > ul > li {
    /* only display the toc for the current document */
    display: none;
    padding-right: 0.4em;

    &.current {
      display: list-item;
    }
  }

  .caption {
    /* supress toc captions in the sidebar */
    display: none;
  }
}

.dragbar {
  border-left: 1px solid var(--ndg-border);
  border-right: 1px solid var(--ndg-content-background);
  background-color: var(--ndg-content-background);

  &:hover {
    background-color: var(--ndg-dragbar-background);
    border-right: 1px solid var(--ndg-border);
    cursor: ew-resize;
  }

  .grabber {
    color: var(--ndg-border);
    visibility: hidden; /* Hide by default */
    user-select: none; /* Prevent text selection */
    text-align: center;
    font-weight: bold;
    padding: 0;
    width: 100%;
    line-height: 0.8rem;

    &:hover {
      visibility: visible; /* Show on hover */
    }
  }
}

.footer {
  background-color: var(--ndg-accent-background);
  color: var(--ndg-content-color);
  padding: .4em;
  border-top: 1px solid var(--ndg-border);
  text-wrap: nowrap;
}

.lnav {
  background-color: var(--ndg-accent-background);
  color: var(--ndg-content-color);
  border-top: 1px solid var(--ndg-border);
}

.toctree-wrapper {
  ul ul {
    padding-left: .8rem;
    list-style-position: inside;
  }

  .caption {
    color: var(--ndg-heading-color);
    font-size: 1.1em;
    font-weight: bold;
  }
}

.color-scheme-toggle-wrapper {
  display: inline-block;
}

.color-scheme-toggle {
  background-color: grey;
  padding: 0;

  border-radius: 50cqh;

  color: white;

  & button {
    border: none;
    border-radius: 50%;
    padding: .2rem;
    margin: 0;
    background: none;
  }

  & .active {
    border: none;
    background-color: var(--ndg-dragbar-background);
  }
}

.version {
  padding: 0.5em;
  font-weight: bold;

  & .release {
    font-size: 1.5em;
  }

  & .stable {
    color: var(--ndg-mid-green);
  }

  & .beta {
    color: var(--ndg-mid-orange);
  }

}

.external-link {
  font-size: 0.8em;
  color: #888;
}

.lnav {
  text-wrap: nowrap;

  .nav-button {
    background-color: var(--ndg-nav-button-background);
    color: var(--ndg-nav-button-color);
    font-size: 1em;
    padding: 0.4em;
    border-radius: 4px;
    border: none;
    text-wrap: nowrap;

    &:hover {
      background-color: var(--ndg-nav-button-hover-background);
      cursor: pointer;
    }
  }
}

/* Document specific styles */

#root-toc {
  /* Hide the root toc in the root old_guide.md */
  display: none;
}

.content {
  background-color: var(--ndg-content-background);
  line-height: 1.5;
}

.content table {
  padding: 0;
  border-collapse: collapse;
  border: 1px solid var(--ndg-border);
  margin-bottom: 1em;

  tr {
    &:hover {
      background-color: var(--ndg-accent-background);
    }
  }

  th {
    background-color: var(--ndg-accent-background);
    color: var(--ndg-text-color);
    font-weight: bold;
    border: 1px solid var(--ndg-border);
    padding: 0.5em;
  }

  td {
    padding: 0.5em;
    border: none;
    border: 1px solid var(--ndg-border);
  }

  p {
    margin: 0;
    padding: 0;
  }

  .caption-text {
    font-weight: bold;
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }
}

.content blockquote {
  background-color: var(--ndg-accent-background);
  padding: 0.5em;
  font-size: 1em;
  margin: 0;
  margin-bottom: 1em;
  border-left: 4px solid var(--ndg-mid-blue);

  p {
    margin: 0;
    padding: 0;
  }
}

/* Styling of {{ home }} page (fa fa-home fa-fw) */
i.home-link {
  background-color: var(--ndg-light-blue);
  color: var(--ndg-mid-blue);
  font-weight: bold;
  font-size: 1em;
  border-radius: 4px;
  border: none;
  padding: 0.2em;
}

/* Backticks and modifiers: `Some literal value` */
.content code.literal {
  background-color: light-dark(#e7f2f9, #2a2e3b);
  border: none;
  border-radius: 4px;
  /* border: 1px solid var(--ndg-border); */
  font-family: var(--ndg-font-mono);
  font-size: 0.9em;
  padding: 0.05em 0.3em;

  /* Reference to links and page refs: `Some Page`{.link-ref} */
    &.link-ref, &.page-ref {
    background-color: var(--ndg-light-blue);
    color: var(--ndg-mid-blue);
    font-weight: bold;
    font-family: var(--ndg-font-condensed);
    font-size: 1em;
    border: none;
  }

  /* Reference to a blue/submit button: `Submit`{.button-ref} */
  &.button {
    background-color: var(--ndg-button-blue);
    color: white;
    font-family: var(--ndg-font-normal);
    font-size: 0.9em;
    font-weight: 500;
    border: none;

    &.blue, &.primary {
      /* Default button */
    }

    &.white, &.plain {
      background-color: var(--ndg-button-white);
      color: var(--ndg-light-text-color);
      border: 1px solid var(--ndg-border);
    }

    &.help {
      background-color: var(--ndg-button-help);
    }

    &.green, &.secondary {
      background-color: var(--ndg-button-green);
    }

    &.red, &.danger {
      background-color: var(--ndg-button-red);
    }

    /* Reference to a orange/warning button: `Warning`{.button-ref .orange} */
    &.orange, &.warning {
      background-color: var(--ndg-button-orange);
      color: white;
    }

    /* Reference to a gray/dismiss button: `Dismiss`{.button-ref .grey} */
    &.gray, &.grey, &.dismiss {
      background-color: var(--ndg-button-gray);
      color: white;
    }
  }
}

.content .field-list {
  .colon {
    display: none;
  }

  dt {
    font-weight: bold;
    font-family: var(--ndg-font-condensed);
  }
}

.content .list-header {
    color: var(--ndg-heading-color);
    font-size: 1.1em;
}

.hidden {
  display: none;
}

.button-ref {
  background-color: var(--ndg-mid-green);
  color: white;

  &.green {
    background-color: var(--ndg-mid-green);
    color: white
  }
}

.highlight {
  background-color: var(--ndg-accent-background);
  border-radius: 4px;
  padding: 0.5em 0.9em;
  font-size: 1em;
  margin-bottom: 1em;

  pre {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.fine-print {
  font-family: var(--ndg-font-condensed);
}

/* Admonition Blocks */

.admonition {
  border-radius: 4px;
  padding: 0.4em 0.8em;
  margin-bottom: 1em;
  color: var(--ndg-text-color);

  a {
    font-weight: normal;
    text-decoration: none;
    color: var(--ndg-text-color);
    border-bottom: 1px dotted var(--ndg-text-color);

    &:hover {
      border-bottom: 1px solid var(--ndg-text-color);
    }

    &::after {
      font-weight: normal;
      border: none;
      color: var(--ndg-text-color) !important;
      border-bottom: none;
    }
  }

  p {
    margin: 0;
    padding: 0;

    &.admonition-title {
      font-weight: bold;
      margin-bottom: 0.5em;

      &::before {
        padding-right: 0.4em;
        font-weight: 900;
        font-family: var(--ndg-font-awesome);
      }
    }
  }

  &.note {
    background-color: var(--ndg-note-background);
    .admonition-title {
      color: var(--ndg-note-title-color);
      &::before {
        content: var(--ndg-note-icon);
      }
    }

    code.literal {
      background: var(--ndg-note-admonition-background);
    }
  }

  &.tip {
    background-color: var(--ndg-tip-background);
    .admonition-title {
      color: var(--ndg-tip-title-color);
      &::before {
        content: var(--ndg-tip-icon);
      }
    }

    code.literal {
      background: var(--ndg-tip-admonition-background);
    }

  }

  &.warning {
    background-color: var(--ndg-warning-background);
    .admonition-title {
      color: var(--ndg-warning-title-color);
      &::before {
        content: var(--ndg-warning-icon);
      }
    }

    code.literal {
      background: var(--ndg-warning-admonition-background);
    }
}

  &.danger {
    background-color: var(--ndg-danger-background);
    .admonition-title {
      color: var(--ndg-danger-title-color);
      &::before {
        content: var(--ndg-danger-icon);
      }
    }

    code.literal {
      background: var(--ndg-danger-admonition-background);
    }

  }
}