#docs-notifications {
  position: fixed;
  top: 65px;
  right: 10px;
  z-index: 100;
  width: calc(100vw - 20px);
  max-width: 450px;
  transition: all .4s ease, top 0s;

  .notification {
    display: none; // initial hidden state
    right: -50px; // initial hidden state
    opacity: 0; // initial hidden state

    position: relative;
    padding: 1.25rem 2.5rem 1.25rem 1.25rem;
    border-radius: $radius;
    box-shadow: 2px 2px 6px rgba($g2-kevlar, .35);
    margin-bottom: 10px;

    color: $g20-white;

    .notification-title {
      h3 {
        margin-bottom: 1rem;
        transition: font-size .2s;
      }
    }

    .notification-content-wrapper{
      position: relative;
    }

    .notification-slug {
      font-size: .97rem;
      margin: -.5rem 0 1.5rem 0;

      & + .notification-content {
        border-top: 1px dotted rgba($g20-white, .5);
        padding-top: 1.25rem;
      }
    }

    .notification-content {
      font-size: 1.05rem;
      opacity: 1;
      max-height: 500px;
      margin-bottom: 1.5rem;
      transition: opacity .4s, max-height .2s ease-out, margin .2s ease-out, padding .2s;
      
      h1,h2,h3,h4,h5,h6 {
        margin: 1rem 0 .75rem;
        &:first-child {margin-top: 0;}
      }
    }

    .close-notification {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 1.7rem;
      cursor: pointer;
      transition: color .2s;
      font-weight: bold;
      color: rgba($g20-white, .5);
      &:hover{ color: $g20-white }
    }

    .show {
      position: absolute;
      bottom: 1rem;
      left: 1.25rem;
      text-transform: uppercase;
      font-size: .8rem;
      font-weight: bold;
      opacity: .75;
      transition: opacity .2s;
      &:hover {
        cursor: pointer;
        opacity: 1;
      }
      &:before {content: "Show less"}
    }

    &.note {
      @include gradient($grad-GarageBand);
      a:hover { color: $gr-gypsy; }
      code { color: $gr-gypsy; background: rgba($gr-gypsy, .25); }
      pre { background: rgba($gr-gypsy, .25); }
    }

    &.warn {
      @include gradient($grad-FuyuPersimmon, 225deg);
      a:hover { color: $r-basalt; }
      code { color: #ffbbdd; background: rgba($r-basalt, .35); }
      pre { background: rgba($r-basalt, .35); }
    }

    //////////// Basic HTML element styles for notification content ////////////

    h1,h2,h3,h4,h5,h6 {
      font-weight: 500;
      margin: 1rem 0 .75rem;
      &:first-child { margin-top: 0; }
    }

    h1,h2 { font-size: 1.6rem; }
    h3 { font-size: 1.35rem; }
    h4 { font-size: 1.2rem; }
    h5 { font-size: 1.1rem; }
    h6 { font-size: 1.05rem; font-style: italic; }

    p,li  { line-height: 1.5rem; }

    p { margin: 0 0 .75rem; }

    a {
      font-weight: bold;
      text-decoration: none;
      color: $g20-white;
      transition: color .2s;
    }

    ul,ol { padding-left: 1.5rem; }

    code {
      padding: .15rem .4rem;
      border-radius: $radius;
      font-weight: bold;
    }

    pre {
      padding: 1rem;
      border-radius: $radius;
      overflow: scroll;
      code { background: transparent !important; }
    }

    &.min {
      .notification-title {h3 {font-size: 1.15rem;}}
      .notification-content {
        max-height: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
        pointer-events: none;
      }
      .show::before {content: "Show more"}
    }
  }
}

///////////////////////////////// MEDIA QUERIES ////////////////////////////////

@include media(small) {
  #docs-notifications {top: 50px;}
}