/* ==========================================================================
   editor-modal.css loads on any screen where the WoowGallery button is output

   Any styles that will be used by the WoowGallery modal should be put here
   ========================================================================== */
/* ==========================================================================
   Imports
   ========================================================================== */
@import "vars";
@import "mixins";

/* ==========================================================================
   Add Gallery Button
   ========================================================================== */
.woowgallery-media-modal-button {
  padding-left: .4em;

  span.woowgallery-media-icon {
    //background: url(images/menu-icon.png) transparent no-repeat scroll 0 0;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: text-top;
  }
}

/* ==========================================================================
   Modal Styles
   ========================================================================== */
.attachments-browser {
  .media-toolbar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    height: auto;
    overflow: visible;
    background-color: rgba(255, 255, 255, 0.5);

    .media-toolbar-secondary {
      position: relative;
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      width: auto;
      max-width: initial;
      flex: 1;
      justify-content: flex-start;
      min-width: 290px;

      select {
        width: auto;
        flex: 0 0 auto;
        margin-right: 10px;
      }

      .woowgallery-select-switchers {
        order: 10;
        margin-right: 10px;
        margin-top: 8px;
        white-space: nowrap;
      }

      .spinner {
        flex: 0 0 auto;
        order: 20;
      }
    }
  }
}

.woowgallery-media-frame {

  &.hide-selected {
    .media-frame-content li.attachment.woowgallery-selected:not(.details) {
      display: none;
    }
  }

  .attachments {
    .woowgallery-selected {
      box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 7px #ccc;
      opacity: 0.5;

      &:hover {
        opacity: 0.8;
      }

      .check {
        display: block;
        pointer-events: none;

        &:hover .media-modal-icon {
          background-position: -1px 0;
        }
      }
    }
  }
}

.media-modal {

  .additional-preview-data {
    position: absolute;
    left: 10px;
    bottom: 10px;
    pointer-events: none;

    .item-gallery-count {
      padding: 7px 4px;
      background: #0073aa;
      line-height: 1;
      border: 1px solid black;
      box-shadow: -1px 1px 0 0 #eee, -2px 2px 0 0 #000, -3px 3px 0 0 #eee, -4px 4px 0 0 #000;
      border-radius: 4px;
      color: #fff;
      font-size: 20px;
      min-width: 2.2em;
      text-align: center;
    }
  }
}

.woowgallery-bulk-edit-modal {
  .woowgallery-selected-preview {
    overflow: auto;
  }
}

#woowgallery-modal {
  display: none;

  &.woowgallery-modal-active {
    display: block;
  }

  .media-menu {
    overflow-y: auto;
    padding-top: 50px;

    .media-menu-item {
      display: flex;
      align-items: center;

      &.active {
        background-color: #00a0d2;
        color: #fff;
      }

      .wg-posttype-icon.svg {
        width: 1.72em;
        height: 1.72em;
      }

    }
  }

  .media-frame {

    .media-frame-title {
      display: flex;
      align-items: center;
      background-color: #fff;
      padding-left: 0;
      height: 50px;
      position: relative;
      left: 0;

      & > * {
        position: static;
      }

      h1 {
        cursor: default;
        color: #000;
        flex: 1;
      }

      button .dashicons {
        display: inline-block;
      }
    }
  }

  .media-frame-content {
    bottom: 0;

    &.show-iframe {
      overflow: hidden;

      iframe {
        background: url("../images/spinner-cube.gif") center center no-repeat;
      }
    }
  }

  .attachments-browser {
    display: flex;
  }

  .attachment-media-view {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .media-toolbar {
    position: static;
    align-items: flex-start;
    padding-bottom: 7px;
    flex: 0 0 auto;

    > div > * {
      margin-top: 7px !important;
    }
  }

  .media-toolbar-secondary {
    display: flex;
    align-items: center;

    .woowgallery-pager {
      margin-right: 40px;
    }

    .woowgallery-select-switchers {

      label {
        font-size: 18px;
        margin: 0;
      }
    }
  }

  .media-toolbar-primary {
    display: flex;
    align-items: center;
    height: auto;

    .spinner {
      float: none;
      margin: 0 10px 0 0;
      flex: 1 0 auto;
    }

    .search {
      flex: 1 1 auto;
      margin: 0;
    }
  }

  .form-control {
    flex: 1 1 auto;
    border-radius: 4px;
  }

  .no-thumbnail {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    color: #fff;
    padding: 15px;
  }

  .attachment-info {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: auto;
    box-sizing: border-box;
    margin-bottom: 0;
    width: 300px;
    box-shadow: inset 0 4px 4px -4px rgba(0, 0, 0, .1);
    border-bottom: 0;
    border-left: 1px solid #ddd;
    background: #f3f3f3;

    .attachment-preview {
      margin-bottom: 15px;

      .thumbnail {
        max-width: none;
        max-height: none;
        width: 100%;
        height: 100%;
        margin: 0;
        position: absolute;
        left: 0;
        top: 0;

        img {
          max-width: none;
          max-height: none;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }

    .attachment-details {
      padding-bottom: 15px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 15px;

      .title {
        margin: 5px 0;
        font-size: 1.2em;
        font-weight: bold;
      }

      .date {
        font-size: 0.9em;
      }

      .wg-count {
        font-size: 0.95em;
      }
    }

    .settings {
      padding: 12px 16px 10px;
      overflow: auto;
      margin: 0;
      flex: 1 1 auto;
    }

    .woowgallery-setting {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      label {
        min-width: 70px;
        text-align: right;
        padding: 0 7px 0 0;
      }

      .multi-input {
        flex: 1 1 auto;
        display: flex;
        align-items: center;

        .form-control {
          flex: 0 0 auto;

          &:first-child {
            flex: 1 1 auto;
            width: 100%;
          }
        }
      }
    }

    .actions {
      padding: 15px 16px;
      margin: 0;
      text-align: right;
      border-top: 1px solid #ddd;
      background-color: #fcfcfc;
      box-shadow: 0 4px 4px 4px rgba(0, 0, 0, 0.1);
    }

    .spinner {
      float: none;
    }
  }

  .woowgallery-attachments-wrapper {
    position: static;
    overflow: auto;
    flex: 1 1 auto;
  }

  .no-entries-found {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80%;

    &.still-loading {
      background: url("../images/spinner-cube.gif") center center no-repeat;

      * {
        display: none;
      }
    }
  }

  ul.attachments {
    position: static;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding: 0;
    margin: 10px;

    li {
      position: relative;
      width: 100%;
      z-index: 1;
      margin: 0;
      padding: 8px;
      border: 2px solid #ffffff;
      list-style: none;
      vertical-align: top;
      background-clip: padding-box;
      background: #ffffff;
      cursor: auto;

      &.selected {
        box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 7px #5b9dd9;
        outline: none;

        .check {
          background-color: #0073aa;
          box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0073aa;

          .media-modal-icon {
            background-position: -21px 0;
          }

          &:hover .media-modal-icon {
            background-position: -60px 0;
          }
        }

        &.woowgallery-selected {
          opacity: 0.5;

          &:hover {
            opacity: 0.8;
          }

          .check {
            background-color: #eee;
            pointer-events: none;

            .media-modal-icon {
              background-position: -1px 0;
            }
          }
        }

        &.selected-last {

          .check {
            background-color: #1aaa00;

            .media-modal-icon {
              background-position: -21px 0;
            }

            &:hover .media-modal-icon {
              background-position: -60px 0;
            }
          }
        }
      }

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;

        &.icon {
          left: 50% !important;
          top: 50% !important;
          transform: translate(-50%, -50%);
          max-height: 100%;
          width: auto;
          height: auto;
          object-fit: initial;
        }
      }

      div.meta {
        width: auto;
        overflow: hidden;
        background-color: rgba(0, 0, 0, 0.6);
        pointer-events: none;
        padding: 4px 15px;
        position: absolute;
        left: 8px;
        bottom: 8px;
        right: 8px;
        color: #fff;

        div.title {
          font-size: 12px;
          font-weight: 700;
          padding: 4px 0;
        }

        .wg-count {
          font-size: 12px;
          padding: 4px 0;
        }
      }
    }
  }

  #wg-modal-menu-toggle {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  #woowgallery-modal {
    .attachments-browser {
      flex-direction: column;
    }

    .attachment-info {
      width: auto;

      .settings {
        display: none;
      }
    }
  }
}

@media screen and (max-width: 900px) {
  #woowgallery-modal {

    #wg-modal-menu-toggle {
      position: relative;
      z-index: 200;
      display: block;
      float: left;
      margin: 0 -7px 0 20px;
      cursor: pointer;

      span {
        display: block;
        line-height: 1;
        transition: transform 0.3s;
      }
    }

    .modal-menu-slide-in {
      #wg-modal-menu-toggle span {
        transform: rotate(-90deg);
      }
    }

    .media-frame:not(.hide-menu) {

      .media-frame-menu {
        position: absolute;
        left: -200px;
        width: 200px;
        transform: translateX(0);
        transition: transform 0.3s;
      }

      .menu-backdrop {
        display: none;
      }

      &.modal-menu-slide-in {

        .media-frame-menu {
          transform: translateX(200px);
        }

        .menu-backdrop {
          display: block;
          position: absolute;
          left: 100%;
          top: 0;
          height: 100%;
          width: 100vw;
          background-color: rgba(0, 0, 0, 0.2);
        }
      }

      .media-menu {
        max-width: none;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 5px 0;
        border-width: 0;
        border-right-width: 1px;
        display: block;
        transform: none;
        top: 50px;
      }

      .media-frame-content {
        top: 50px;
      }
    }
  }
}

@media screen and (max-width: 640px) {
  #woowgallery-portal {

    .woowgallery-bulk-edit-modal {

      .edit-attachment-frame .attachment-media-view {
        max-width: initial;
        width: 100%;
        min-height: initial;
      }

      ul.attachments {
        grid-auto-columns: minmax(150px, 1fr);
      }

      li.attachment {
        grid-row: 1;
      }

      .attachment-info {
        padding-bottom: 60px;

        .actions {
          position: fixed;
          left: 0;
          bottom: 0;
          z-index: 2;
          right: 0;
        }
      }
    }
  }
}

/* ==========================================================================
   WP Link Modal styles
   ========================================================================== */
body > #wp-link-backdrop {
  z-index: 160100;
}

body > #wp-link-wrap {
  z-index: 160105;
}

/* ==========================================================================
   Retina
   ========================================================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
  .woowgallery-media-modal-button span.woowgallery-media-icon {
    //background-image: url(images/menu-icon@2x.png);
    background-size: 16px 16px;
  }
}