$border-dashed-color: #cdcdcd;
$info-wrapper-width: 300px;

.album-navigation-wrapper {
  border-bottom: 1px dashed $border-dashed-color;
  margin-bottom: 15px;
  padding-bottom: 15px;

  .you-are-here {
    font-weight: 500;
    text-transform: uppercase;
  }

  a {
    &.folder {
      color: #444;
      font-weight: bold;

      &:hover {
        color: #888;
      }
    }
  }
}

.gallery-wrapper {
  border: 1px solid transparent;
  display: flex;
  min-height: 550px;

  &.dragover {
    background-color: rgba(32, 168, 216, 0.1);
    border: 1px solid #20a8d8;
  }

  .gallery-main-wrapper {
    border-right: 1px dashed $border-dashed-color;
    padding-right: 18px;
    width: calc(100% - #{$info-wrapper-width});

    &.without-info {
      border-right: none;
      padding-right: 0;
      width: 100%;
    }

    .items {
      display: flex;
      flex-wrap: wrap;
      margin: 0 -5px;
      padding: 0 0 15px;

      &.list {
        .item {
          border-bottom: 1px solid rgba(0, 0, 0, 0.12);
          box-shadow: none;
          margin: 0 5px;
          height: 46px;
          width: 100%;

          &:last-child {
            border-bottom: none;
          }

          .item-inner {
            background: transparent;

            .my-item-thumbnail {
              float: left;
              height: 45px;
              width: 45px;

              .my-item-thumbnail-inner {
                font-size: 16px;
                line-height: 45px;

                img {
                  max-height: 80px;
                }
              }
            }

            .item-name {
              .item-name-inner {
                padding-left: 15px;

                .icon {
                  display: none;
                }
              }
            }
          }
        }

        .item-placeholder {
          background: rgba(204, 204, 204, 0.2);
          border: 1px dashed #ccc;
          height: 46px;
          margin: 0 5px;
          padding: 0;
          width: 100%;
        }
      }

      .item {
        background-color: #fff;
        border-radius: 0;
        box-shadow:
          0 2px 2px 0 rgba(0, 0, 0, 0.14),
          0 3px 1px -2px rgba(0, 0, 0, 0.12),
          0 1px 5px 0 rgba(0, 0, 0, 0.2)
        ;
        color: #263238;
        cursor: pointer;
        height: 190px;
        margin: 5px;
        padding: 0;
        min-width: 190px;
        transition: box-shadow 0.15s ease-in-out;
        width: 190px;

        .link {
          span {
            height: 100%;
            width: 100%;
          }
        }

        &.dir {
          height: 45px;
        }

        &.active {
          background-color: #20a8d8;
          box-shadow:
            0 6px 10px 0 rgba(0, 0, 0, 0.14),
            0 1px 18px 0 rgba(0, 0, 0, 0.12),
            0 3px 5px -1px rgba(0, 0, 0, 0.2)
          ;

          .item-inner {
            .item-name {
              .item-name-inner {
                .icon {
                  &:before {
                    background-color: #fff;
                    border-radius: 50%;
                    content: '';
                    display: block;
                    height: 30px;
                    left: 50%;
                    position: absolute;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 30px;
                    z-index: -1;
                  }
                }

                .name {
                  color: #fff;
                }

                .item-menu {
                  .file-manager-dropdown-btn {
                    color: #fff;
                  }
                }
              }
            }
          }
        }

        .item-inner {
          .my-item-thumbnail {
            align-items: center;
            background-color: #fff;
            display: flex;
            height: 145px;
            justify-content: center;
            overflow: hidden;

            .my-item-thumbnail-inner {
              font-size: 50px;
              line-height: 50px;
              vertical-align: middle;

              i {
                color: #8f8f8f;
              }

              img {
                display: inline;
                max-height: 200px;
                max-width: initial;
              }
            }
          }

          .item-name {
            height: 45px;

            .item-name-inner {
              align-items: center;
              display: flex;
              height: 100%;
              white-space: nowrap;

              .icon {
                height: 20px;
                line-height: 20px;
                padding: 0 16px;
                position: relative;
                vertical-align: middle;
                z-index: 1;
                color: #8f8f8f;
              }

              .name {
                height: 20px;
                line-height: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 100%;

                span {
                  display: block;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
          }
        }

        .item-menu {
          .file-manager-dropdown-btn {
            background: none;
            border: 0;
            border-radius: 50%;
            cursor: pointer;
            display: block;
            font: {
              size: 18px;
              weight: bold;
            }
            height: 30px;
            line-height: 30px;
            margin-right: 5px;
            padding: 0 5px;
            text-align: center;
            transition: background 0.2s ease-in-out;
            width: 30px;
            vertical-align: middle;

            i {
              line-height: 30px;
            }

            &:focus {
              background: rgba(0, 0, 0, 0.06);
              outline: 0;
            }
          }

          .item-dropdown {
            max-width: 150px;
            padding: 0;

            ul {
              margin-bottom: 0;

              li {
                height: 30px;

                a {
                  color: rgba(47, 50, 58, 0.7);
                  display: block;
                  line-height: 30px;
                  padding: 0 5px;

                  &:hover {
                    background: #f9f9f9;
                  }
                }
              }
            }

          }
        }
      }
    }
  }

  .gallery-info-wrapper {
    border-radius: 0;
    color: #263238;
    margin: 0;
    padding: 15px;
    transition: margin-right 0.3s ease-in-out;
    width: $info-wrapper-width;
    z-index: 15;

    .gallery-info-inner-wrapper {
      background: #fff;
      height: calc(100% + 30px);
      padding: 15px;
      margin: -15px -15px 0 0;
      
      .gallery-info-header {
        display: flex;
        font: {
          size: 18px;
          weight: 500;
        }
        padding: 0 0 15px;
        position: relative;

        .icon {
          color: #8f8f8f;
          padding: 0 15px 0 0;
        }

        .name {
          line-height: 20px;
          padding-right: 27px;
          word-wrap: break-word;
          width: 250px;
        }
      }
      
      .gallery-info-stats {
         padding-bottom: 15px;
        
        .gallery-stat {
          display: inline-block;
          min-width: 50px;
        }
      }

      .gallery-info-tab-content {
        .img {
          padding-bottom: 20px;
          text-align: center;

          img {
            max-height: 200px;
          }

          .icon {
            font: {
              size: 60px;
            }

            i {
              border: 1px solid #ddd;
              color: #8f8f8f;
              display: inline-block;
              padding: 20px 23px;
            }
          }
        }

        .description {
          border-top: 1px dashed #cdcdcd;
          padding-top: 15px;
          margin-bottom: 15px;

          header {
            font: {
              size: 16px;
              weight: 500;
            }
          }
        }

        .details {
          border-top: 1px dashed #cdcdcd;
          padding-top: 15px;
          
          p {
            margin: 0;
            font-size: 12px !important;
          }
          
          .clipboard {
            position: relative;
          }
          .gallery-picture-links,
          .gallery-picture-clipboard {
            border-top: 1px dashed #cdcdcd;
            margin-top: 15px;
            padding-top: 15px;
          }
          
          .gallery_url {
            border-bottom-right-radius: 0 !important;
            border-top-right-radius: 0 !important;
            cursor: pointer;
            margin-bottom: 0;
          }
          
          .copy-to-clipboard {
            border-bottom-right-radius: 2px;
            border-top-right-radius: 2px;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.upload-progress-wrapper {
  .upload-loader-wrapper {
    padding: 30px 0;
    text-align: center;

    .lds-roller {
      display: inline-block;
      position: relative;
      width: 64px;
      height: 64px;
      div {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 32px 32px;
        &:after {
          content: " ";
          display: block;
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #5a910d;
          margin: -3px 0 0 -3px;
        }
        &:nth-child(1) {
          animation-delay: -0.036s;

          &:after {
            top: 50px;
            left: 50px;
          }
        }
        &:nth-child(2) {
          animation-delay: -0.072s;

          &:after {
            top: 54px;
            left: 45px;
          }
        }
        &:nth-child(3) {
          animation-delay: -0.108s;

          &:after {
            top: 57px;
            left: 39px;
          }
        }
        &:nth-child(4) {
          animation-delay: -0.144s;

          &:after {
            top: 58px;
            left: 32px;
          }
        }
        &:nth-child(5) {
          animation-delay: -0.18s;

          &:after {
            top: 57px;
            left: 25px;
          }
        }
        &:nth-child(6) {
          animation-delay: -0.216s;

          &:after {
            top: 54px;
            left: 19px;
          }
        }
        &:nth-child(7) {
          animation-delay: -0.252s;

          &:after {
            top: 50px;
            left: 14px;
          }
        }
        &:nth-child(8) {
          animation-delay: -0.288s;

          &:after {
            top: 45px;
            left: 10px;
          }
        }
      }
    }
  }

  .upload-progress {
    margin: 15px 0;

    .progress-meter {
      background-color: #5a910d;
    }
  }
}

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