Sindbad~EG File Manager

.ps-post--lightbox {
  margin-bottom: 0;
  border-radius: 0;
}

.ps-lightbox {
  --sidebar-width: 400px;

  position: fixed;
  z-index: 100000;
  top: 0;
  left: 0;
  width: 100%;
  width: 100vw;
  height: 100%;
  font-family: var(--PS-FONT-FAMILY);
  background-color: rgba(0,0,0,.8);
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }
}

.ps-lightbox--video {}

.ps-lightbox--photo {}

.ps-lightbox--open {
  overflow: hidden;
}

.ps-lightbox--comments {
  --preview-height: 120px;

  .ps-lightbox__side {
    top: var(--preview-height);
  }

  .ps-lightbox__view {
    padding-top: 0;
    height: var(--preview-height);
  }

  .ps-lightbox__actions,
  .ps-lightbox__object-actions {
    display: none;
  }

  .ps-lightbox__nav {
    top: 0;
    transform: none;
    height: 100%;
    opacity: 1;
    font-size: 30px;
  }

  .ps-lightbox__nav--left {
    left: 0;
  }

  .ps-lightbox__nav--right {
    right: 0;
  }

  // #5053 - Temporary fix
  // .ps-comments__list {
  //   padding-bottom: 63px;
  // }
}

.ps-lightbox__inner {
  width: 100%;
  height: 100%;

  @include mq($from: desktop) {
    padding: 40px 100px;
  }

  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  .ps-lightbox-simple & {
    display: flex;
    align-items: center;
  }
}

.ps-lightbox__container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  //overflow: hidden;
  background-color: #000;
  vertical-align: middle;

  @include mq($until: desktop){
    overflow: auto;
  }

  .ps-lightbox-simple & {
    @if ($rtl) {
      right: 50%;
      transform: translateX(50%);
    } @else {
      left: 50%;
      transform: translateX(-50%);
    }
    
    display: block;
    width: auto;
    height: auto;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: visible;
    min-width: 250px;
  }
}

.ps-lightbox__view {
  position: relative;
  z-index: 5;
  height: 100%;
  padding-top: 37px;
  vertical-align: middle;
  overflow: hidden;

  @include mq($from: desktop) {
    @if $rtl {
      margin-left: var(--sidebar-width);
    } @else {
      margin-right: var(--sidebar-width);
    }

    padding-top: 0;

    .ps-lightbox-simple & {
      margin-left: 0;
      margin-right: 0;
    }
  }
}

.ps-lightbox__object {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;

  > * {
    margin: 0;
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
  }

  img {
    display: inline !important;
    max-height: 100%;
    vertical-align: middle;
  }

  .ps-lightbox-simple & img {
    padding-bottom: 40px;

    @include mq($until: desktop) {
      max-height: calc(100vh - 200px) !important;
    }
  }

  &:before {
    content: '';
    display: none;
    height: 100%;
    vertical-align: middle;
  }
}

.ps-lightbox__object-inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  visibility: hidden;
}

.ps-lightbox__object-container {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.ps-lightbox__object-item {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  color: #fff;

  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

  iframe {
    display: inline-block;
    height: 100%;
    width: 100%;
    vertical-align: middle;
  }

  audio {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
  }

  .wp-video {
    display: inline-block;
    height: 100% !important;
    margin: 0;
    max-height: 100%;
    vertical-align: middle;
    width: 100% !important;
  }

  .wp-video-shortcode {
    display: block;
    height: 100%;
    margin: 0;
  }

  .wp-video-shortcode {
    display: block;
    height: 100%;
    margin: 0;
  }

  .BorlabsCookie {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    color: #494954;
  }
}

.ps-lightbox__object-actions {
  position: absolute;

  @if $rtl {
    left: 0;
  } @else {
    right: 0;
  }

  bottom: 0;
  padding: var(--PADD);
  font-size: 90%;

  @include mq($from: desktop) {
    opacity: .5;
    transition: opacity .2s ease;

    .ps-lightbox__view:hover & {
      opacity: 1;
    }
  }
}

.ps-lightbox__object-action {
  display: inline-block;
  padding: var(--PADD);
  color: #fff;
  background-color: rgba(0,0,0, .65);
  border-radius: var(--BORDER-RADIUS);
  cursor: pointer;

  &:hover {
    color: #fff;
    background-color: rgba(0,0,0, .8);
  }
}

.ps-lightbox__object-dropdown {
  @include ps-dropdown-style-menu;

  .ps-dropdown__menu {
    top: auto;

    @if $rtl {
      left: 100%;
      right: auto;
    } @else {
      left: auto;
      right: 100%;
    }

    bottom: 100%;
  }
}

.ps-lightbox__nav {
  @include reset--button;

  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--PADD--MD);
  font-size: 30px;
  color: #fff;
  background-color: transparent;
  transition: all .2s ease;

  &:hover,
  &:focus {
    color: #fff;
  }

  @include mq($until: desktop) {
    text-shadow: 0 0 10px #000;
  }

  @include mq($from: desktop) {
    font-size: 50px;
    opacity: .5;
    background-color: rgba(0,0,0, .25);

    @if $comp_mode {
      &:hover,
      &:focus {
        background-color: rgba(0,0,0, .25);
        outline: none;
      }
    }

    .ps-lightbox__view:hover & {
      opacity: 1;
    }
  }
}

.ps-lightbox__nav--left {
  left: 0;
  border-top-right-radius: var(--BORDER-RADIUS--MD);
  border-bottom-right-radius: var(--BORDER-RADIUS--MD);

  @include mq($from: desktop) {
    left: -100px;

    .ps-lightbox__view:hover & {
      left: var(--PADD);
    }
  }
}

.ps-lightbox__nav--right {
  right: 0;
  border-top-left-radius: var(--BORDER-RADIUS--MD);
  border-bottom-left-radius: var(--BORDER-RADIUS--MD);

  @include mq($from: desktop) {
    right: -100px;

    .ps-lightbox__view:hover & {
      right: var(--PADD);
    }
  }
}

.ps-lightbox__zoom {
  position: absolute;
  display: none;    
  padding: var(--PADD);
  bottom: var(--PADD);
  left: var(--PADD);
  background-color: rgba(0,0,0,.65);
  border-radius: var(--BORDER-RADIUS);
  font-size: 90%;

  > a {
    color: #fff;
    cursor: pointer;

    &:hover,
    &:focus {
      color: #fff;
    }
  }

  @include mq($from: desktop) {
    opacity: .5;
    transition: opacity .2s ease;

    .ps-lightbox__view:hover & {
      opacity: 1;
    }
  }

  .ps-lightbox-simple & {
    text-align: center;
    padding: 10px;
    background: #000;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    border-radius: none;
  }
}

.ps-lightbox__actions {
  position: absolute;
  top: 0;

  @if $rtl {
    left: 37px;
    right: 0;
  } @else {
    left: 0;
    right: 37px;
  }

  font-size: 90%;
  border-bottom: 1px solid var(--DIVIDER--R);

  @include mq($from: desktop) {
    display: none;
  }
}

.ps-lightbox__action {
  button {
    @include reset--button;

    display: inline-block;
    padding: var(--PADD);
    color: #fff;
    background-color: rgba(0,0,0, .65);
    border-radius: 0;

    @if $rtl {
      border-left: 1px solid var(--DIVIDER--R);
    } @else {
      border-right: 1px solid var(--DIVIDER--R);
    }

    cursor: pointer;

    &:hover {
      color: #fff;
      background-color: rgba(0,0,0, .8);
    }
  }
}

.ps-lightbox__side {
  position: absolute;
  top: 0;

  @if $rtl {
    left: 0;
  } @else {
    right: 0;
  }

  bottom: 0;
  max-width: 100%;

  @include mq($until: desktop) {
    width: 100%;
  }
}

.ps-lightbox__side-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--PS-COLOR--APP);
  width: 100%;

  display: none;

  @include mq($from: desktop) {
    display: flex;
    width: var(--sidebar-width);
    // overflow: auto;


    .ps-lightbox-simple & {
      display: none;
    }
  }

  .ps-lightbox__side-wrapper {
    overflow: auto;
    height: 100%;

    @include mq($until: desktop) {
      overflow: visible;
      height: auto;
      padding-bottom: 125px;
      background: var(--c-ps-post-bg);
    }

    .ps-reactions__dropdown {
      bottom: unset;
      top: -165%;
      left: var(--PADD--MD);
    }
  }

  .ps-lightbox__side-wrapper--reply {
    @include mq($until: desktop) {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--PS-COLOR--APP);
      z-index: 50;
    }
  }

  &.ps-lightbox-data--opened {
    display: flex;
  }

  .ps-comments__edit {
    @include mq($from: desktop) {
      flex-direction: column;
      align-items: flex-end;

      .ps-comments__reply-actions {
        margin-top: var(--PADD);
      }

      .ps-comments__input-addons {
        top: auto;
        bottom: 100%;

        .ps-comments__input-addon {
          &:before {
            top: 100%;
            bottom: auto;
            border-top: 8px solid var(--PS-COLOR--APP);
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: none;
          }
        }
      }
    }
  }

  .ps-comments__input-actions {
    position: absolute;
    bottom: -37px;
    display: none;
    
    @if $rtl {
      left: 52%;
    } @else {
      right: 52%;
    }
  }

  .ps-comments__reply-actions {
    .ps-btn {
      flex-grow: 1;
    }
  }

  .ps-comments__reply-send {
    width: 50%;

    @if $rtl {
      margin-right: auto;
    } @else {
      margin-left: auto;
    }
  }
  
  .ps-comments__edit {
    .ps-comments__input-wrapper {
      width: 100%;
    }

    .ps-comments__input-actions {
      @include mq($from: desktop) {
        right: 48%;
      }
    }
  }

  .ps-comments--nested {
    .ps-comments__edit {
      .ps-comments__reply-send {
        @include mq($from: desktop) {
          width: 54%;
        }
      }

      .ps-comments__input-actions {
        @include mq($from: desktop) {
          right: 52%;
        }
      }
    }
  }
}

.ps-lightbox__close {
  --size: 37px;

  position: absolute;
  z-index: 20;
  top: 0;

  @if $rtl {
    left: 0;
  } @else {
    right: 0;
  }

  width: var(--size);
  height: var(--size);
  padding: 0;
  line-height: var(--size);
  text-align: center;
  background-color: #fff;
  color: var(--PS-COLOR--TEXT--LIGHT);
  box-shadow: 0 0 0 2px rgba(0,0,0, .2);
  cursor: pointer;

  &:hover {
    color: var(--PS-COLOR--TEXT);
  }

  @include mq($from: desktop) {
    --size: 30px;

    top: -20px;

    @if $rtl {
      left: -20px;
    } @else {
      right: -20px;
    }

    border-radius: var(--BORDER-RADIUS--MD);
  }
}

.ps-lightbox__loading {}

.ps-lightbox__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  font-size: 50px;
  color: #fff;
  text-shadow: 0 0 3px #000;
  transition: opacity .2s ease;
  cursor: pointer;

  &.gci-stop {
    opacity: 0;

    &:hover {
      opacity: 1;
    }
  }
}

.ps-lightbox__spinner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  width: 50px;
  height: 50px;
  margin: auto;
  border: 4px solid #FFF;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: rotate 1s infinite linear;
  animation: rotate 1s infinite linear;
}

@-webkit-keyframes rotate {
  0%    { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100%  { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes rotate {
  0%    { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100%  { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}