/**
 * The following variables will be used to style the entire website.
 * 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
 */

:root {
  /*
  *********************************************************
  COLOR WHITE
  *********************************************************
  LIGHT MODE
      - background color
      - top nav link color
      - footer text color
  DARK MODE
      - headline color
      - top nav link color
      - sidebar menu link color
      - footer text color
  ********************************************************/

  --oss-color-white: #ffffff;

  /*
  *********************************************************
  COLOR BLACK
  *********************************************************
  LIGHT MODE
      - headline color
      - sidebar menu link color
  DARK MODE
      - background color
  ********************************************************/

  --oss-color-black: #202020;

  /*
  *********************************************************
  COLOR MIDNIGHT
  *********************************************************
  LIGHT MODE
      - navbar background
      - footer background
  DARK MODE
      - 
  ********************************************************/

  --oss-color-midnight: #000e38;

  /*
  *********************************************************
  COLOR PRIMARY (hex and hsl)
  6 variations of this color will be generated (light/dark)
  *********************************************************
  LIGHT MODE
    - primary color
    - sidebar menu active
    - sidebar menu hover
    - sidebar subnav menu hover
  ********************************************************/

  --oss-color-primary: #e13e65;
  --oss-color-primary-hs: 346, 73%;
  --oss-color-primary-l: 56%;

  --oss-color-primary-shade-dark: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) - 10%)
  );
  --oss-color-primary-shade-darker: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) - 15%)
  );
  --oss-color-primary-shade-darkest: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) - 30%)
  );
  --oss-color-primary-shade-light: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) + 10%)
  );
  --oss-color-primary-shade-lighter: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) + 15%)
  );
  --oss-color-primary-shade-lightest: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) + 30%)
  );

  /*
  *********************************************************
  COLOR PRIMARY DARK (hex and hsl)
  6 variations of this color will be generated (light/dark)
  *********************************************************
  DARK MODE
    - primary color
    - sidebar menu active
    - sidebar menu hover
    - sidebar subnav menu hover
  ********************************************************/

  --oss-color-primary-dark: #ff92ac;
  --oss-color-primary-dark-hs: 346, 100%;
  --oss-color-primary-dark-l: 79%;

  --oss-color-primary-dark-shade-dark: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) - 10%)
  );
  --oss-color-primary-dark-shade-darker: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) - 15%)
  );
  --oss-color-primary-dark-shade-darkest: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) - 30%)
  );
  --oss-color-primary-dark-shade-light: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) + 10%)
  );
  --oss-color-primary-dark-shade-lighter: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) + 15%)
  );
  --oss-color-primary-dark-shade-lightest: hsl(
    var(--oss-color-primary-hs),
    calc(var(--oss-color-primary-l) + 30%)
  );

  /*
  *********************************************************
  COLOR GREY LIGHT
  *********************************************************
  LIGHT MODE
      - 
  DARK MODE
      - 
      - 
  ********************************************************/

  --oss-color-grey-light: #f9f9f9;

  /*
  *********************************************************
  COLOR GREY
  *********************************************************
  LIGHT MODE
      - right toc left border color
  DARK MODE
      - body text color
      - right toc link color
      - sidebar subnav link color
  ********************************************************/

  --oss-color-grey: #d9d9d9;

  /*
  *********************************************************
  COLOR GREY DARK
  *********************************************************
  LIGHT MODE
      - right toc link color
      - sidebar subnav link color
  DARK MODE
      -
  ********************************************************/

  --oss-color-grey-dark: #606060;

  /*
  *********************************************************
  COLOR GREY DARKER
  *********************************************************
  LIGHT MODE
      - body text color
      - sidebar menu link hover background
  DARK MODE
      -
  ********************************************************/

  --oss-color-grey-darker: #454545;

  /*
  *********************************************************
  COLOR GREY DARKEST
  *********************************************************
  LIGHT MODE
      -
  DARK MODE
      - prism background color
  ********************************************************/

  --oss-color-grey-darkest: #303030;

  /*
  *********************************************************
  BORDER RADIUS
  *********************************************************
  - general border radius for buttons
  ********************************************************/

  --oss-border-radius: 0.19rem;

  /*
  *********************************************************
  PAGE/LANDER COLORS
  ********************************************************/

  --oss-background-color: var(--oss-color-grey-light);
  --oss-background-dark: var(--oss-color-black);
  --oss-background-light: var(--oss-color-white);
  --oss-text: var(--oss-color-grey-darker);
  --oss-text-dark: var(--oss-color-black);
  --oss-text-light: var(--oss-color-white);
  --oss-button: var(--oss-color-black);
  --oss-button-hover: var(--oss-color-primary);
  --oss-button-light: var(--oss-color-primary);
  --oss-button-light-hover: var(--oss-color-primary-shade-dark);
  --oss-link: var(--oss-color-primary);
  --oss-link-hover: var(--oss-color-primary-shade-light);
  --oss-input-background: var(--oss-color-grey-light);

  --oss-stack-space-mobile: 1.875rem;
  --oss-stack-space-tablet: 3.125rem;
}

/***********************************************************************
 * !! STOP !!
 * DO NOT EDIT BELOW THIS SECTION UNLESS YOU KNOW THE PASSWORD...
 * IF YOU DO EDIT BELOW, YOU SHOULD OVERIDE USING THE VARIABLES ABOVE
 **********************************************************************/

:root {
  // colors
  --ifm-color-primary: var(--oss-color-primary);
  --ifm-color-primary-dark: var(--oss-color-primary-shade-dark);
  --ifm-color-primary-darker: var(--oss-color-primary-shade-darker);
  --ifm-color-primary-darkest: var(--oss-color-primary-shade-darkest);
  --ifm-color-primary-light: var(--oss-color-primary-shade-light);
  --ifm-color-primary-lighter: var(--oss-color-primary-shade-lighter);
  --ifm-color-primary-lightest: var(--oss-color-primary-shade-lightest);

  // general
  --ifm-background-color: var(--oss-color-white);
  --ifm-heading-color: var(--oss-color-black);
  --ifm-font-color-base: var(--oss-color-grey-darker);
  --ifm-line-height-base: 1.75;
  --ifm-link-color: var(--ifm-color-primary);
  --ifm-link-hover-color: var(--ifm-color-primary-dark);
  --ifm-link-decoration: none;
  --ifm-link-hover-decoration: none;

  // top nav
  --ifm-navbar-link-color: var(--oss-color-white);
  --ifm-navbar-link-hover-color: var(--oss-color-primary-dark);
  --ifm-navbar-shadow: none;
  --ifm-navbar-padding-horizontal: calc(var(--ifm-spacing-horizontal) * 1.875);
  --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5);
  --ifm-navbar-background-color: var(--oss-color-black);

  // menu (left sidebar)
  --ifm-menu-color: var(--oss-color-black);
  --ifm-menu-color-active: var(--ifm-color-primary);
  --ifm-menu-color-background-hover: var(--oss-color-grey-light);
  --ifm-menu-color-background-active: var(--oss-color-grey);
  // --ifm-navbar-background-color: var(--oss-color-grey-light);

  // table of contents (right sidebar)
  --ifm-toc-border-color: var(--oss-color-grey-light);
  --ifm-toc-link-color: var(--oss-color-grey-dark);

  // footer
  --ifm-footer-background-color: var(--oss-color-black);
  --ifm-footer-color: var(--oss-color-white);
  --ifm-footer-padding-horizontal: var(--ifm-spacing-horizontal);
  --ifm-footer-padding-vertical: var(--ifm-spacing-vertical);
}

[data-theme='dark']:root {
  // colors
  --ifm-color-primary: var(--oss-color-primary-dark);
  --ifm-color-primary-dark: var(--oss-color-primary-dark-shade-dark);
  --ifm-color-primary-darker: var(--oss-color-primary-dark-shade-darker);
  --ifm-color-primary-darkest: var(--oss-color-primary-dark-shade-darkest);
  --ifm-color-primary-light: var(--oss-color-primary-dark-shade-light);
  --ifm-color-primary-lighter: var(--oss-color-primary-dark-shade-lighter);
  --ifm-color-primary-lightest: var(--oss-color-primary-dark-shade-lightest);

  // general
  --ifm-background-color: var(--oss-color-black);
  --ifm-heading-color: var(--oss-color-white);
  --ifm-font-color-base: var(--oss-color-grey);
  --ifm-link-color: var(--ifm-color-primary);
  --ifm-link-hover-color: var(--ifm-color-primary-light);

  // top nav
  --ifm-navbar-link-color: var(--oss-color-white);
  --ifm-navbar-link-hover-color: var(--oss-color-primary-dark);

  // menu (left sidebar)
  --ifm-menu-color: var(--oss-color-white);
  --ifm-menu-color-active: var(--ifm-color-primary);
  --ifm-menu-color-background-hover: var(--oss-color-black);
  --ifm-menu-color-background-active: var(--oss-color-grey-darker);

  // table of contents (right sidebar)
  --ifm-toc-border-color: var(--oss-color-grey-darker);
  --ifm-toc-link-color: var(--oss-color-grey);

  // page/lander colors
  --oss-background-color: var(--oss-color-grey-darkest);
  --oss-background-light: var(--oss-color-black);
  --oss-text-dark: var(--oss-color-grey-light);
  --oss-text: var(--oss-color-grey);
  --oss-input-background: var(--oss-color-grey-darkest);
}

/*****************************************************************
 * !! STOP !! STOP !!
 * YOU REALLY SHOULDN'T NEED TO EDIT BELOW THIS SECTION
 * CHANGES BELOW THIS SECTION MIGHT BREAK THE GENERAL VIBE
 *****************************************************************/

/*****************************************************************
 * GLOBAL STYLES THAT APPLY TO BOTH LIGHT AND DARK THEME
 *****************************************************************/
.container {
  padding: calc(var(--ifm-spacing-vertical) * 1.5)
    calc(var(--ifm-spacing-horizontal) * 1.5) !important;
}

img {
  height: auto;
}

.menu__link--sublist-caret:after {
  background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
}

.docusaurus-mt-lg {
  margin-bottom: 3rem;
}

// top navbar
.navbar {
  padding: var(--ifm-navbar-padding-vertical)
    var(--ifm-navbar-padding-horizontal);

  @media (max-width: 996px) {
    padding: var(--ifm-navbar-padding-vertical)
      calc(var(--ifm-navbar-padding-horizontal) * 0.75);
  }

  .navbar__link {
    font-weight: var(--ifm-font-weight-bold);
  }

  .navbar__items {
    .header-github-link {
      font-size: 0;

      &:before {
        content: '';
        width: 24px;
        height: 24px;
        display: flex;
      }

      &:hover {
        opacity: 0.75;
        transition: opacity 0.2s ease-in-out;
      }

      svg {
        display: none;
      }
    }

    .header-nearform-link {
      font-size: 0;

      &:before {
        content: '';
        width: 32px;
        height: 22px;
        display: flex;
      }

      &:hover {
        opacity: 0.75;
        transition: opacity 0.2s ease-in-out;
      }

      svg {
        display: none;
      }
    }

    button {
      background: none !important;

      svg {
        width: 28px;
        height: 28px;
      }

      &:hover {
        opacity: 0.75;
        transition: opacity 0.2s ease-in-out;
      }
    }

    .navbar__link {
      svg {
        display: none;
      }
    }
  }

  // mobile
  .navbar-sidebar {
    .navbar__brand {
      margin-right: auto;
    }

    .navbar-sidebar__close {
      margin-left: 0;
    }

    .header-github-link,
    .header-nearform-link,
    .menu__link {
      svg {
        display: none;
      }
    }
  }
}

// left sidebar menu
nav.menu {
  padding: calc(var(--ifm-navbar-padding-vertical) * 3)
    calc(var(--ifm-navbar-padding-horizontal) * 0.675);
  scrollbar-gutter: auto;

  .menu__list-item-collapsible {
    border-radius: var(--oss-border-radius);
    font-weight: var(--ifm-font-weight-bold);
  }

  .theme-doc-sidebar-item-link-level-1 {
    &.menu__list-item {
      font-weight: var(--ifm-font-weight-bold);
    }
  }

  .theme-doc-sidebar-item-link-level-2 {
    &.menu__list-item {
      font-weight: var(--ifm-font-weight-normal);
    }
  }

  .menu__caret,
  .menu__link {
    border-radius: var(--oss-border-radius);
    text-decoration: none;
  }
}

// right sidebar menu
ul.table-of-contents {
  border-top: none;
}

// content
article {
  & > div {
    button {
      &::after {
        background: var(--ifm-menu-link-sublist-icon) 50% 50% / 1.5rem 1.5rem
          no-repeat !important;
      }
    }
  }
}

// footer
.footer {
  &__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  a {
    opacity: 1;
  }
}

/*****************************************************************
 * LIGHT THEME SPECIFIC
 *****************************************************************/
[data-theme='light'] {
  // top navbar
  .navbar {
    .navbar__toggle {
      svg {
        path {
          stroke: var(--oss-color-white);
        }
      }
    }

    .navbar__title {
      color: var(--oss-color-white);
    }

    .navbar__link--active {
      color: var(--ifm-navbar-link-color);

      &:hover {
        color: var(--ifm-navbar-link-hover-color);
      }
    }

    .navbar__items {
      .header-github-link {
        &:before {
          background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
            no-repeat;
        }
      }

      .header-nearform-link {
        &:before {
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 60 111.98 85.72'%3E%3Cpath class='cls-2' d='m60.18,60.18h11.3l36.71,53.4v-53.4h12.17v75.36h-11.3l-36.71-53.4v53.4h-12.17V60.18Z' stroke-width='0' fill='%23fff'/%3E%3Cpath class='cls-1' d='m126.51,135.54h45.29v11.09h-45.29v-11.09Z' fill='%2300e5a4'/%3E%3C/svg%3E")
            no-repeat;
        }
      }

      button {
        svg[class*='lightToggleIcon'] {
          path {
            fill: var(--oss-color-white);
          }
        }
      }
    }

    // mobile
    .navbar-sidebar {
      .navbar__title {
        color: var(--oss-color-white);

        @media (max-width: 996px) {
          color: var(--oss-color-black);
        }
      }

      .header-github-link,
      .header-nearform-link {
        &:hover {
          color: var(--ifm-menu-color-active);
        }
      }
    }
  }

  // left sidebar container
  aside.theme-doc-sidebar-container {
    background-color: var(--oss-color-grey);
    border-right: none;
  }

  // left sidebar menu
  nav.menu {
    .menu__list-item-collapsible {
      a {
        color: var(--ifm-menu-color);

        &:hover {
          color: var(--ifm-menu-color-active);
        }
      }
    }

    .theme-doc-sidebar-item-link-level-2 {
      &.menu__list-item {
        a {
          color: var(--oss-color-grey-dark);

          &:hover {
            color: var(--ifm-menu-color-active);
          }

          &.menu__link--active {
            color: var(--ifm-menu-color-active);
          }
        }
      }
    }

    .menu__caret,
    .menu__link {
      &:hover {
        color: var(--ifm-menu-color-active);
      }
    }
  }

  // right sidebar menu
  ul.table-of-contents {
    @media (max-width: 996px) {
      border-top: var(--oss-color-grey) solid 1px;
    }
  }

  // content
  article {
    & > div {
      &:first-child {
        background-color: var(--oss-color-grey-light);
      }
    }
  }

  // footer
  .footer {
    border-top: none;
  }
}

/*****************************************************************
 * DARK THEME SPECIFIC
 *****************************************************************/
[data-theme='dark'] {
  // top navbar
  .navbar {
    .navbar__toggle {
      svg {
        path {
          stroke: var(--oss-color-white);
        }
      }
    }

    .navbar__title {
      color: var(--oss-color-white);
    }

    .navbar__link--active {
      color: var(--ifm-navbar-link-color);

      &:hover {
        color: var(--ifm-navbar-link-hover-color);
      }
    }

    .navbar__items {
      .header-github-link {
        &:before {
          background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ffffff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
            no-repeat;
        }
      }

      .header-nearform-link {
        &:before {
          background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 60 111.98 85.72'%3E%3Cpath class='cls-2' d='m60.18,60.18h11.3l36.71,53.4v-53.4h12.17v75.36h-11.3l-36.71-53.4v53.4h-12.17V60.18Z' stroke-width='0' fill='%23fff'/%3E%3Cpath class='cls-1' d='m126.51,135.54h45.29v11.09h-45.29v-11.09Z' fill='%2300e5a4'/%3E%3C/svg%3E")
            no-repeat;
        }
      }

      button {
        svg[class*='darkToggleIcon'] {
          path {
            fill: var(--oss-color-white);
          }
        }
      }
    }

    // mobile
    .navbar-sidebar {
      .navbar__title {
        color: var(--oss-color-white);

        @media (max-width: 996px) {
          color: var(--oss-color-white);
        }
      }

      .header-github-link,
      .header-formidable-link {
        &:hover {
          color: var(--ifm-menu-color-active);
        }
      }
    }
  }

  // left sidebar container
  aside.theme-doc-sidebar-container {
    background-color: var(--oss-color-black);
    border-right: 1px solid var(--oss-color-grey-darker);
  }

  // left sidebar menu
  nav.menu {
    .menu__list-item-collapsible {
      a {
        color: var(--ifm-menu-color);

        &:hover {
          color: var(--ifm-menu-color-active);
        }
      }
    }

    .theme-doc-sidebar-item-link-level-2 {
      &.menu__list-item {
        a {
          color: var(--oss-color-grey);

          &:hover {
            color: var(--ifm-menu-color-active);
          }

          &.menu__link--active {
            color: var(--ifm-menu-color-active);
          }
        }
      }
    }

    .menu__caret,
    .menu__link {
      &:hover {
        color: var(--ifm-menu-color-active);
      }
    }
  }

  // right sidebar menu
  ul.table-of-contents {
    @media (max-width: 996px) {
      border-top: var(--oss-color-grey-dark) solid 1px;
    }
  }

  // content
  article {
    & > div {
      &:first-child {
        background-color: var(--oss-color-grey-darker);
      }
    }
  }

  // footer
  .footer {
    border-top: 1px solid var(--oss-color-grey-darker);
  }
}
