/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/

.selectImageBox {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: ~"calc( 100vh - 145px )";
    padding: 0 5px;

    * {
      font-size: 17px;
    }

    > .dropFileArea {
      padding: 0;
      text-align: center;
      border: 3px dashed @dropFileAreaBackgroundOnDragEnter;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 222px;

      &.dragEntered {
        background: #ccc;
      }

      span {
        white-space: nowrap;
        margin-left: 10px ~'; /** orientation=lt */ ';
        margin-right: 10px ~'; /** orientation=rt */ ';
      }

      > .selectImageLinks {
        line-height: 25px;
        padding: 10px 20px;

        > span {
          margin-left: 8px ~'; /** orientation=lt */ ';
          margin-right: 8px ~'; /** orientation=rt */ ';
          a {
            text-decoration: underline;
          }
        }
      }

      > .imageURLContainer {
        white-space: nowrap;
        line-height: 40px;
        text-align: left ~'; /** orientation=lt */ ';
        text-align: right ~'; /** orientation=rt */ ';
        margin: auto 28px;
        flex: 2;

        input[type="text"] {
          height: 35px;
          min-width: 95%;
          width: 100%;
          max-width: ~"calc( 100vw - 140px )";
          line-height: 30px;
          margin: 0;
        }

        a.btn.actionIcon {
          border: 1px solid #ccc;
          border-radius: 3px;
        }

        a.btn.actionIcon i {
          font-size: 25px;
        }
      }

      > .backButton {
        margin: 10px 0 0 28px ~'; /** orientation=lt */ ';
        margin: 10px 28px 0 0 ~'; /** orientation=rt */ ';
        position: relative;
        left: 0;
        text-align: left ~'; /** orientation=lt */ ';
        text-align: right ~'; /** orientation=rt */ ';
        text-decoration: underline;
        height: 40px;
        line-height: 40px;
        flex: 1;
      }
      > .uploadContainer {
        width: 100%;
        .fileHidden {
          overflow: hidden;
        }
        > .fileHidden input[type="file"] {
          display: none;
        }
        > .progressBar {
          height: 30px;
          margin: 10px;
        }
        > .progressBar .progress {
          width: ~"calc( 100% - 32px )";
          margin: 5px 0;
          height: 20px;
        }
      }

      .selectedImagePreview {
        height: 222px;
        max-height: 100%;
        width: 100%;

        img {
          max-height: 100%;
        }
      }
    }

    > .removeFile {
      margin: 10px 0 0;
      text-align: right ~'; /** orientation=lt */ ';
      text-align: left ~'; /** orientation=rt */ ';
      a {
        font-size: 0.8em;
      }
    }

    > .altArea {
      margin-top: 16px;
      .altLabelInput {
        margin-bottom: 8px;
        display: flex;
        justify-content: space-between;
        label {
          margin-bottom: 0!important;
          margin-right: 12px!important;
          white-space: nowrap;
          margin-top: 10px;
        }
        .inputAlt  {
          flex: 1 1 auto;
          .imageAlt {
            margin-bottom: 10px!important;
            width: 100%;
          }
          .alt-description {
            .mdi-human {
              color: white;
              background: @primaryColor;
              border-radius: 50%;
              padding: 1px 2px;
              margin-right: 8px;
            }
            .caption.text-light-color {
              font-size: 0.75rem !important;
              font-weight: 400;
              letter-spacing: 0.0333333333em !important;
              line-height: 1.25rem;
              font-style: italic !important;
            }
          }
        }
      }
    }

    > .selectImageAlign {
      padding: 10px 0;
      line-height: 40px;
      height: auto;
      margin-top: 15px;

      > .btn-group {
        padding: 0 10px;

        a.btn {
          margin: 0 -3px;
        }
      }
    }
}

.dropFileWindow[role=dialog]>.cke_dialog {
  max-height: 100vh !important;
  max-width: 100vw !important;
  width: auto;

  .cke_dialog_body {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .cke_dialog_title {
      line-height: 20px;
    }

    .cke_dialog_contents {
      height: ~"calc( 100% - 35px )";
      width: auto;

      .cke_dialog_contents_body {
        overflow: hidden;
        display: table-cell;
        max-width: 100vw;
        height: 100% !important;

        .cke_dialog_ui_vbox_child,
        .cke_dialog_page_contents,
        table {
          height: 100%;
        }
      }

      .uiActionBorder {
        height: 36px;
      }
    }
  }
}
@media (max-width: 767px) {
  .dropFileWindow[role=dialog]>.cke_dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 ~'!important; /** orientation=lt */ ';
    right: 0 ~'!important; /** orientation=rt */ ';
    left: auto ~'!important; /** orientation=rt */ ';
    height: 100vh !important;
    width: 100vw !important;

    .cke_dialog_body {
      height: 100vh;
      width: ~"calc( 100vw - 6px )";

      .cke_dialog_contents {
        height: ~"calc( 100vh - 35px )";
      }
    }
  }
}
@media ( max-height : 480px) {
  .selectImageBox > .dropFileArea {
    min-height: 120px;
  }
  .selectImageBox .dropFileArea .selectImageLinks {
    line-height: normal;
  }
  .selectImageBox > .dropFileArea > .backButton {
    margin: 0 0 0 28px ~'; /** orientation=lt */ ';
    margin: 0 28px 0 0 ~'; /** orientation=rt */ ';
  }
}
@media (max-height: 380px) {
  .dropFileWindow[role=dialog] .cke_dialog_contents_body {
    padding: 5px;
  }
}
