$base-z-index: 1001;

@import '../../node_modules/bourbon/app/assets/stylesheets/addons/clearfix';

[data-lightbox-path] {
  display: none !important;
}

a.lightbox-content-close {
  position:        absolute;
  top:             0;
  right:           0;
  display:         block;
  padding:         5px;
  text-decoration: none;
  color:           white;
  font-weight:     bold;
  margin:          12px;
  line-height:     20px;
  width:           20px;
  height:          20px;
  border-radius:   3px;
  text-align:      center;
  background:      lightgrey;
}

a.lightbox-content-close:hover {
  background: grey;
}

#lightbox-over {
  display:    none;
  position:   fixed;
  top:        0;
  left:       0;
  width:      100%;
  height:     100%;
  background: rgba(0, 0, 0, 0.4);
  z-index:    $base-z-index;
}

#lightbox-inner {
  display:    none;
  position:   absolute;
  z-index:    $base-z-index + 1;
  left:       50%;
  top:        0;
  background: white;
  #back {
    display: none;
  }
  #lightbox-content {
    @include clearfix;
    padding:  16px;
    width:    400px;
    position: relative;
    #lightbox-close {
      position: absolute;
      top:      0;
      right:    0;
      width:    20px;
      height:   20px;
      margin:   8px;
      cursor:   pointer;
      &:hover {
        background-position: 0 -20px;
      }
    }
    &, > form, > div {
      > a:first-child + h3, > input:first-child + h3, > h3:first-child {
        margin-top: 2px;
      }
    }
  }
}

#lightbox-loader {
  background: rgba(0, 0, 0, 0.8);
  margin-top: -30px;
  transform:  translate(-50%, -50%);
  position:   fixed;
  display:    none;
  z-index:    $base-z-index + 2;
  padding:    20px;
  color:      white;
  left:       50%;
  top:        50%;
}

#lightbox-loader img.indicator {
  float:  left;
  margin: 7px 18px 7px 7px;
}

@media screen and (max-width: 767px) {

  #lightbox-inner {
    left:       0;
    top:        0;
    min-height: 100%;
    width:      100%;
    #back {
      background-color: #aaa;
      border-bottom:    2px solid rgba(0, 0, 0, 0.4);
      padding:          1em;
      text-align:       center;
      display:          block;
      color:            #fff;
      text-transform:   uppercase;
      margin:           -4px -14px 1em;
      font-size:        120%;
      font-weight:      bold;
      cursor:           pointer;
    }
    #lightbox-content {
      width: auto;
      #lightbox-close {
        display: none;
      }
    }
  }

}