@import './vuepress/styles/config.less';

/* fix anchor link positioning  for fixed navbar */
// FIXME this is not enough as it works only for section headers
:root {
  --anchorHeight: calc(var(--navbarHeight) + 0.5rem);
}
.content .section {
  margin-bottom: 0;
  &:hover {
    .headerlink {
      opacity: 1;
    }
  }
}

.content {
   // FIXME: sphinx should provide a citation-reference?
  & a:focus {
    // remove outline because padding mess it up
    outline: none;
  }
}


/* Use # as symbol for anchor headerlinks */
h1, h2, h3, h4, h5, h6 {
  &:hover a.headerlink, &:hover a:visited.headerlink {
    &::after {
      visibility: visible;
      content: "#";
    }
  }
}

a.headerlink, a:visited.headerlink {
  font-size: 0.85em;
  visibility: hidden;
  &:hover {
    text-decoration: none;
  }
}

ul.page-nav {
  list-style: none;
  & li {
    display: inline-block;
  }
}

.body-header {
  display: flex;
  & ul.page-nav {
    flex-grow: 1;
    list-style: none;
    list-style-position: inside;
    text-align: right;
    margin-right: 2em;
    & li + li:before {
      content: "|";
      padding: 0 1em;
    }
  }
}

ul.breadcrumbs {
  list-style: none;
  & li {
    display: inline-block;
  }
}



/** index page **/
.toctree-wrapper .caption {
  // same as h2
  font-weight: 600;
  line-height: 1.25em;
  font-size: 1.65rem;
  padding-bottom: .3rem;
  border-bottom: 0.1em solid var(--BClr);
}



/** footer **/
.footer {
  clear: both;
  min-height: 2rem;
  padding-top: 1rem;
  overflow: auto;
  color: grey;
  font-size: small;
  line-height: 1.5rem;
}


/** pygments style **/
.content .highlight {
  border-radius: 0.5em;
}

// force background color from pygments
.content .highlight pre {
  background-color: inherit;
}

.content .highlighted {
  background-color: var(--AClr); //#fbe54e;
  font-weight: bold;
  padding: 0 4px;
}

/*** admonitions based on custom-blocks.styl */
.admonition {
  padding: .1rem 1.5rem;
  border-left-width: .5rem;
  border-left-style: solid;
  margin: 1rem 0;
  // default color
  background-color: var(--AaBgClr);
  border-color: var(--AaBClr);
  color: var(--AaTClr);
  a, a:visited {
    color: var(--AaLClr);
    &:hover {
      color: var(--AaLHClr);
    }
  }

  .admonition-title {
    font-weight: 600;
    margin-bottom: -0.4rem;
  }
  &.success {
    background-color: var(--AsBgClr);
    border-color: var(--AsBClr);
    color: var(--AsTClr);
    a, a:visited {
      color: var(--AsLClr);
      &:hover {
        color: var(--AsLHClr);
      }
    }
  }
  &.hint {
    background-color: var(--AhBgClr);
    border-color: var(--AhBClr);
    color: var(--AhTClr);
    a, a:visited {
      color: var(--AhLClr);
      &:hover {
        color: var(--AhLHClr);
      }
    }
  }
  &.tip {
    background-color: var(--AtBgClr);
    border-color: var(--AtBClr);
    color: var(--AtTClr);
    a, a:visited {
      color: var(--AtLClr);
      &:hover {
        color: var(--AtLHClr);
      }
    }
  }
  &.important {
    background-color: var(--AiBgClr);
    border-color: var(--AiBClr);
    color: var(--AiTClr);
    a, a:visited {
      color: var(--AiLClr);
      &:hover {
        color: var(--AiLHClr);
      }
    }
  }
  &.note {
    background-color: var(--AnBgClr);
    border-color: var(--AnBClr);
    color: var(--AnTClr);
    a, a:visited {
      color: var(--AnLClr);
      &:hover {
        color: var(--AnLHClr);
      }
    }
  }
  &.warning {
    background-color: var(--AwBgClr);
    border-color: var(--AwBClr);
    color: var(--AwTClr);
    a, a:visited {
      color: var(--AwLClr);
      &:hover {
        color: var(--AwLHClr);
      }
    }
  }
  &.danger {
    background-color: var(--AdBgClr);
    border-color: var(--AdBClr);
    color: var(--AdTClr);
    a, a:visited {
      color: var(--AdLClr);
      &:hover {
        color: var(--AdLHClr);
      }
    }
  }
  &.caution {
    background-color: var(--AcBgClr);
    border-color: var(--AcBClr);
    color: var(--AcTClr);
    a, a:visited {
      color: var(--AcLClr);
      &:hover {
        color: var(--AcLHClr);
      }
    }
  }
  &.danger {
    background-color: var(--AdBgClr);
    border-color: var(--AdBClr);
    color: var(--AdTClr);
    a, a:visited {
      color: var(--AdLClr);
      &:hover {
        color: var(--AdLHClr);
      }
    }
  }
}

blockquote {
  background-color: var(--BqBgClr);
  border-color: var(--BqBClr);
  margin-left: -0.4rem;
  color: var(--BqTClr);
  a, a:visited {
    color: var(--BqLClr);
    &:hover {
      color: var(--BqLHClr);
    }
  }
}