.media-library {
  slider.drawing-zone {
    width: 85%;
    * {
      overflow: auto;
    }
  }
  .tipbox {
    float: right;
    margin-top: 20px;
    i {
      width: 23px;
    }
  }
  .split-screen {
    .compression {
      animation: splitScreenGrow 1 400ms;
      width: 70%;
      position: absolute;
      right: 0;
      overflow: auto;
      box-sizing: border-box;
      border: 1px solid #ddd;
      margin-bottom: 25px;
      height: 455px;
      .compression-view {
        padding: 15px;
        width: 470px;
        position: absolute;
        top: 0;
        right: 0;
        > button {
          margin-bottom: 15px;
          z-index: 1;
        }
      }
      .to-list {
        line-height: 37px;
        i.back {
          float: left;
          margin-right: 8px;
          margin-top: 0px;
          opacity: 1;
          font-size: 32px;
        }
      }

      .document-title {
        display: none;
      }
      .nav-arrow {
        display: block;
        position: absolute;
        z-index: 5;
        color: #fff;
        border-radius: 40px;
        height: 45px;
        width: 45px;
        text-align: center;
        line-height: 45px;
        font-size: 30px;
        top: 175px;
        opacity: 0.5;
        transition: opacity 250ms ease;
        margin: 10px;
        background: $primary;
        left: 0;
        &:hover {
          opacity: 1;
        }
        &.forward {
          right: 0;
          left: auto;
        }
      }
    }
  }
  .import-files {
    > article {
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      overflow: hidden;
      opacity: 0;
      width: 80%;
      position: absolute;
      top: 39%;
      height: 70px;
      transition: 500ms ease;
      box-sizing: border-box;
      border: none;
      .select-file {
        margin: 0;
      }
      .help {
        display: flex;
        align-items: center;
        height: 100%;
      }
    }
    i.cloud-upload {
      text-align: center;
      &::before {
        font-size: 40px;
      }
    }
    article.default {
      opacity: 1;
    }
    &.dragover {
      article.drop {
        opacity: 1;
      }
      article.default {
        opacity: 0;
      }
    }
    padding: 100px 75px 100px;
    border: 2px dashed #ddd;
    background: #fafafa;
  }
  .browse {
    .explorer {
      img {
        pointer-events: none;
      }
      .highlight {
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 700ms ease;
        &.show {
          opacity: 1;
        }
      }
    }
    .icons-view {
      margin: 0;
    }
    nav.vertical {
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      li {
        border: none !important;
      }
    }
  }
  image-compression {
    display: block;
    position: relative;
    float: left;
    hr.row {
      min-height: 0;
    }
  }

  &-toolbar {
    position: sticky;
    bottom: 0;
  }
}

.media-library {
  nav.vertical ul li a {
    text-indent: 0;
  }
  .browse {
    .explorer {
      .highlight {
        background: $accent;
      }
    }
  }
  section.media-library {
    h2 {
      font-size: 20px;
      font-weight: normal;
    }
    header + section.medium-text {
      text-align: left;
    }
    slider {
      padding: 0;
    }
    .select-file {
      h2 {
        margin-bottom: 10px;
      }
      button.file-button {
        float: left !important;
      }
      input[type="text"] {
        margin: 0;
      }
    }
    .compression {
      .nav-arrow {
        background: $primary;
      }
    }
  }
  .import-files {
    .cloud-upload {
      color: $primary;
    }
  }
  .import-files.dragover {
    border-color: $accent;
  }
}

@media screen and (max-width: $tablette) {
  body {
    .media-library {
      .browse {
        .browse-list {
          padding-bottom: 480px;
        }
      }
      .import-files {
        > article {
          .select-file {
            width: 100%;
            button {
              margin: auto;
              float: none;
              display: block;
            }
          }
        }
        .drop {
          display: none;
        }
        .default {
          background: transparent;
          box-shadow: none;
          width: 100%;
          box-sizing: border-box;
          position: relative;
          padding: 0;
          i,
          div:last-child {
            display: none;
          }
        }
      }

      canvas {
        max-width: 100%;
      }

      image-compression {
        max-width: 100%;
        width: 390px;
        margin: auto;
        display: block;
        float: none;
      }

      .compression {
        slider {
          max-width: 350px;
        }
      }

      .split-screen {
        &.split {
          .compression {
            width: 100%;
            max-height: 400px;
            padding: 0;
            border: none;
            .compression-view {
              padding: 0;
              width: 100%;
              .to-list {
                display: none;
              }
            }
            .document-title {
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              i.back {
                margin-right: 10px;
                font-size: 30px;
              }
            }
          }
          .loading-list.drop-zone {
            max-height: 360px;
          }
        }
      }

      .media-library > h2 {
        display: none;
      }
      .search {
        hr {
          display: none;
        }
        h2 {
          display: none;
        }
      }

      .icons-view .element {
        padding: 0;
        margin: 5px;

        .container {
          width: 105px;
          height: 105px;
          margin: 0;
          padding: 0 !important;
          i {
            width: 103px !important;
            height: 103px !important;
            background-size: 89px;
          }
        }
        legend {
          box-sizing: border-box;
          left: 0;
          bottom: 0;
          position: absolute !important;
          a.medium-text {
            font-size: 12px !important;
          }
        }
      }
    }
  }
}

@media screen and (max-width: $small-mobile) {
  body {
    .media-library {
      .browse {
        .browse-list {
          padding-bottom: 480px;
        }
      }
      .import-files {
        > article {
          .select-file {
            width: 100%;
            button {
              margin: auto;
              float: none;
              display: block;
            }
          }
        }
        .drop {
          display: none;
        }
        .default {
          background: transparent;
          box-shadow: none;
          width: 100%;
          box-sizing: border-box;
          position: relative;
          padding: 0;
          i,
          div:last-child {
            display: none;
          }
        }
      }

      canvas {
        max-width: 100%;
      }

      image-compression {
        max-width: 100%;
        width: 390px;
        margin: auto;
        display: block;
        float: none;
      }

      .compression {
        slider {
          max-width: 300px;
        }
      }

      .split-screen {
        &.split {
          .compression {
            width: 100%;
            max-height: 370px;
            padding: 0;
            border: none;
            .compression-view {
              padding: 0;
              width: 100%;
              .to-list {
                display: none;
              }
            }
            .document-title {
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              i.back {
                margin-right: 10px;
                font-size: 30px;
              }
            }
          }
        }
        .loading-list.drop-zone {
          max-height: 360px;
        }
      }

      .media-library > h2 {
        display: none;
      }
      .search {
        hr {
          display: none;
        }
        h2 {
          display: none;
        }
      }

      .icons-view .element {
        padding: 0;
        margin: 5px;

        .container {
          width: 105px;
          height: 105px;
          margin: 0;
          i {
            width: 105px !important;
            height: 105px !important;
          }
        }
        legend {
          box-sizing: border-box;
          left: 0;
          bottom: 0;
          position: absolute !important;
          a.medium-text {
            font-size: 12px !important;
          }
        }
      }
    }
  }
}