/*!
_sidebar.scss
Source file (relative to compiled *.css file): ./scss/_sidebar.scss

This file is included in PhotoBerry Studio. For licensing and copyright notices, please see ../../license.txt (relative to *.css file) or ../../../license.txt (relative to *.scss file).
*/

/* Side Panel */

.photoberry-studio-gallery-side {
  top              : 0;
  right            : 0;
  height           : 100%;
  background-color : #fff;
  position         : fixed;
  padding          : 10px 20px 40px 20px;
  overflow-x       : hidden;
  box-shadow       : $box-shadow-light;
  display          : none;
  z-index          : 9999998;
  box-sizing       : content-box;
  margin           : 0;
  border-left: 1px solid $gray-2;

  @media (max-width : 799px) {
    max-width      : 490px;
    width          : 90%;
    margin         : auto;
    left           : 0;
    padding-bottom : 10px;
    }
  @media (min-width : 800px) {
    width : 320px;
    }

  @media (min-width : 1400px) {
    width : 360px;
    }

  &.photoberry-studio-active {
    display : block;
    }

  h2 {
    border-bottom  : 1px solid $gray-1;
    padding-bottom : 20px;
    padding-left   : 0;
    margin         : 20px 0 20px 0;
    }

  &:has(.photoberry-studio-tabs-nav) h2 {
    margin-bottom : 5px;
    }

  img {
    max-width     : 100%;
    max-height    : 200px;
    margin-bottom : 20px;
    }

  .photoberry-studio-field-wrapper {
    grid-template-columns : 1fr;

    textarea, input[type="text"] {
      width : 100%;
      }
    }

  .photoberry-studio-gallery-side-body {

    overflow-x     : hidden;
    overflow-y     : auto;
    padding-bottom : 200px; // footer height

    }

  .photoberry-studio-tabs-contents, .photoberry-studio-tabs-contents > div {
    width : inherit;
    }

  .photoberry-studio-gallery-side-footer {
    margin-bottom    : 0;
    bottom           : 0;
    position         : fixed;
    background-color : #fff;
    border-top       : 1px solid $gray-1;
    padding-top      : 15px;
    padding-bottom   : 15px;
    display          : flex;
    flex-wrap        : wrap;
    gap              : 10px;
    height           : max-content;
    align-items      : center;
    box-sizing       : border-box;
    width            : inherit;
    max-width        : inherit;

    }

  a.photoberry-studio-remove.photoberry-studio-button-text {
    display       : inline-block;
    margin-bottom : 10px;
    margin-top    : 10px;
    @include buttonRemove();
    }

  // Image doesn't load
  .photoberry-studio-preview .photoberry-studio-error {
    box-shadow    : $box-shadow-light;
    width         : calc(100% - 10px);
    box-sizing    : border-box;
    padding       : 30px 10px;
    text-align    : center;
    margin        : 5px 5px 15px 5px;
    border        : 2px solid #f3f3f3;
    border-radius : 5px;

    img {
      width         : 50px;
      height        : 50px;
      margin-bottom : 10px;
      }

    p {
      font-size     : 13px;
      color         : #081625;
      margin-top    : 0;
      margin-bottom : 10px;
      }

    }

  // Error notice
  .photoberry-studio-error {
    font-size : 13px;
    color     : $accent-red;
    margin    : 10px 0 25px;
    }

  }

// Change width of the lightbox and admin page wrapper when side panel opened

.photoberry-sidebar-open:not(.photoberry-lightbox-open) #wpbody-content {
  @media (max-width : 799px) {
    width : 100%;
    }
  @media (min-width : 800px) {
    width : calc(100% - 360px);
    }

  @media (min-width : 1400px) {
    width : calc(100% - 400px);
    }
  }

.photoberry-lightbox-open.photoberry-sidebar-open {
  #baguetteBox-overlay {
    @media (max-width : 799px) {
      width : 100%;
      }
    @media (min-width : 800px) {
      width : calc(100% - 360px);
      }

    @media (min-width : 1400px) {
      width : calc(100% - 400px);
      }
    }

  .photoberry-studio-gallery-side {
    @media (max-width : 799px) {
      max-width      : 490px;
      width          : 90%;
      margin         : auto;
      position       : fixed;
      left           : 0;
      padding-bottom : 10px;

      }

    .photoberry-studio-gallery-side-footer {
      //position : relative;
      }
    }
  }

.photoberry-studio-admin-page .photoberry-studio-gallery-side .photoberry-studio-tabs-nav {
  margin-top  : 0;
  border-top  : 0;
  padding-top : 0;
  }

// Buttons
#photoberry-comment-auth button.photoberry-studio-button-x.photoberry-studio-close {

  @include button(primary, small, true);

  & {
    position         : absolute;
    top              : 15px;
    right            : 10px;
    width            : 40px;
    height           : 40px;
    background-image : url("../img/icons/black/close.svg");
    background-size  : 28px;
    box-shadow       : unset;
    }
  }

// Loading

.photoberry-studio-pending-retry,
.photoberry-studio-tabs-contents .photoberry-studio-loading {

  position   : relative;
  transition : all 0.5s;
  min-height : 150px;

  &::after {
    content          : "";
    top              : 50%;
    left             : 50%;
    width            : 24px;
    height           : 24px;
    margin-left      : -12px;
    margin-top       : -12px;
    background-image : url("../img/icons/gray/spinner-solid.svg");
    background-size  : cover;
    display          : block;
    position         : absolute;
    animation        : photoberry-studio-rotation 2s infinite ease;
    z-index          : 991;
    visibility       : visible;
    }
  }

img.photoberry-studio-pending-retry {
  &::before {
    content          : "";
    top              : 0;
    left             : 0;
    width            : 100%;
    height           : 100%;
    background-color : $gray-2;
    box-shadow       : inset 0 0 0 1px $gray-2;
    z-index          : 990;
    display          : block;
    position         : absolute;
    visibility       : visible;
    }
  }