// the background of the whole paradeiser navigation, is slightly transparent as it
// includes a webkit background blur by default
$paradeiser-background: rgba(255,255,255,0.95) !default;
$paradeiser-link-color: #9b9b9b !default;

// the small break, used to shrink down the font a bit and reduce the navbar height in $paradeiser-height
$paradeiser-break-small: 760px !default;
$paradeiser-break-medium: 1025px !default;

// your primary color for your application. Used to mix a slight tone into the active links
$paradeiser-primary-color: #97d3e7 !default;
$paradeiser-link-color-active: mix($paradeiser-primary-color, #fff, 20%) !default;

// uses a 10px font size for smartphones and tablets, which is enough as nearly all of them
// have hidpi screens, and 13px for desktops as they have more screen estate anyways
$paradeiser-link-font-size: 10px !default;
$paradeiser-link-font-size-desktop: 13px !default;
$paradeiser-dropdown-background: #4a4a4a !default;
$paradeiser-visible-until: 768px !default;
// paradeiser height on phones and tablets, and a bit bigger on desktops
$paradeiser-height: 50px !default;
$paradeiser-height-desktop: 60px !default;
// set this to true if you want to hide paradeiser on tablets and desktops
// as you have your own implementation for these screens
$paradeiser-mobile-only: false !default;

// using san francsico on iOS9 and OSX 10.11 onwards.
$paradeiser-font-family: -apple-system, -apple-system-body, 'Roboto', 'Helvetica Neue', 'Segoe UI', 'Arial', sans-serif !default;
$paradeiser-font-weight: 400 !default;

// determines the maximum size for icons, turn this up if you want your icons to be bigger
$paradeiser-icons-max-width: 20px;


body {
  @if($paradeiser-mobile-only) {
    @media (max-width: $paradeiser-visible-until) {
      margin-top: $paradeiser-height;
    }
  } @else {
    margin-top: $paradeiser-height-desktop;
    @media (max-width: $paradeiser-visible-until) {
      margin-top: $paradeiser-height;
    }
  }
}

.paradeiser {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: $paradeiser-height;
  background: $paradeiser-background;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.02), 0 2px 10px 0 rgba(0,0,0,0.10);
  transition: top 0.4s ease;

  // enables iOS-like background blurring as seen in iOS 7, available
  // as a CSS component since iOS 9.
  -webkit-backdrop-filter: blur(10px) saturate(100%);
          backdrop-filter: blur(10px) saturate(100%);

  // fully visible paradeiser while it is pinned with headroom.js
  &.headroom--pinned {
    top: 0;
  }

  // and hiding the nav while headroom forces it to.
  &.headroom--unpinned {
    top: -$paradeiser-height;
    @media (min-width: $paradeiser-visible-until) {
      top: -$paradeiser-height-desktop;
    }
  }

  @if($paradeiser-mobile-only) {
    display: none;
    @media (max-width: $paradeiser-visible-until) {
      display: flex;
    }
  } @else {
    display: flex;
  }

  @media (min-width: $paradeiser-visible-until) {
    height: $paradeiser-height-desktop;
  }

  // basically the appearance of all links within the top-nav of paradeiser
  a, .paradeiser_dropdown {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    color: $paradeiser-link-color;
    text-align: center;
    text-decoration: none;
    font-weight: $paradeiser-font-weight;
    font-size: $paradeiser-link-font-size;
    font-family: $paradeiser-font-family;
    cursor: pointer;

    align-items: center;
    flex-grow: 5;
    justify-content: center;

    @media (min-width: $paradeiser-break-medium) {
      font-size: $paradeiser-link-font-size-desktop;
    }

    &.active, &:hover {
      background: $paradeiser-link-color-active;
    }
  }

  // created a fixed space for the icons within the nav for
  // better vertical centering
  .paradeiser_icon_canvas {
    display: block;
    display: flex;
    margin: 0 auto;
    width: 100%;
    height: 20px;
    color: #000;
    text-align: center;

    align-items: center;
    justify-content: center;
    img {
      display: block;
      margin: 0;
      max-width: $paradeiser-icons-max-width;
      width: 100%;
      height: auto;
    }
  }

  // the text of each link, includes a margin top for a little more whitespace
  span {
    margin-top: 5px;
    font-size: $paradeiser-link-font-size;

    @media (min-width: $paradeiser-break-medium) {
      font-size: $paradeiser-link-font-size-desktop;
    }

    &.paradeiser_dropdown {
      margin-top: 0;
      > a {
        width: 100%;
      }
    }
  }

  .paradeiser_logo {
    max-width: 40px;
    width: 100%;
  }

  ul {
    position: fixed;
    top: $paradeiser-height;
    bottom: 0;
    left: 0;
    z-index: 998;
    visibility: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;

    @media (min-width: $paradeiser-visible-until) {
      top: $paradeiser-height-desktop;
    }
    &:target, &.open {
      visibility: visible;
      opacity: 1;
      transition: opacity 0.4s;
      pointer-events: auto;
    }
    li {
      display: inline-block;
      width: 100%;
      background: $paradeiser-dropdown-background;
      text-align: center;
      a {
        display: inline-block;
        padding: 15px 0;
        width: 100%;
        color: #fff;
        font-size: 15px;
      }
      a, span {
        &:hover {
          background: lighten($paradeiser-dropdown-background, 5%);
        }
      }
    }

    // paradeiser-greybox
    li:last-child {
      height: 100%;
      background: transparent;
      a {
        display: block;
        height: 100%;
        background: rgba(0,0,0,0.8);

        backdrop-filter: blur(10px) saturate(100%);
      }
    }
  }
}





/**
* Enabling hiding links based on viewport size
* --
* This is especially useful if you want to enable more points
* in your desktop version straight visible to the user,
* but they are not that important for mobile users, so you hide them
* into the overflow button.
*/

.paradeiser-hidden-phone {
  @media (max-width: $paradeiser-break-small) {
    display: none !important;
  }
}

.paradeiser-hidden-tablet {
  @media (min-width: $paradeiser-break-small + 1) and (max-width: $paradeiser-break-medium) {
    display: none !important;
  }
}

.paradeiser-hidden-desktop {
  @media (min-width: $paradeiser-break-medium + 1) {
    display: none !important;
  }
}