//colors
$boston-blue: #428bca !default;
$alto: #ddd !default;
$tapa: #777 !default;
$mystic: #e1edf7 !default;
$perano: #a1abff !default;

//fonts
$font-0: Menlo !default;
$font-1: Monaco !default;
$font-2: Consolas !default;
$font-3: 'Courier New' !default;
$font-4: monospace !default;

//standard measures
$pad: 5px !default;
$border: 1px !default;
$tablet: 767px !default;

//operations
@function multiply($pixels, $multiplier) {
  @return $pixels * $multiplier;
}

//@extend-elements
%set-text-center {
  text-align: center;
}

%set-progress {
  font-size: multiply($pad, 2.2);
  height: multiply($pad, 2.6);
  line-height: multiply($pad, 2.6);
}

%set-indicator {
  @extend %set-text-center;
  display: inline-block;
  font-size: multiply($pad, 3.2);
  height: multiply($pad, 3.2);
  position: absolute;
  right: multiply($pad, .6);
  top: 0;
  width: multiply($pad, 3.2);
}

%set-block {
  display: block;
}

.theme-explorer-fa {
  .explorer-frame {
    td {
      text-align: left;
      vertical-align: middle;
    }

    .kv-file-content {
      @extend %set-text-center;
      height: multiply($pad, 16);
      padding: $pad;
      width: multiply($pad, 16);
    }
  }

  .file-actions-cell {
    padding: 0;
    position: relative;
    width: multiply($pad, 24);
  }

  .file-thumb-progress {
    .progress {
      @extend %set-block;
      @extend %set-progress;
      margin-top: $pad;
    }

    .progress-bar {
      @extend %set-progress;
    }
  }

  .file-upload-indicator {
    @extend %set-indicator;
  }

  .file-drag-handle {
    @extend %set-indicator;
  }

  .explorer-caption {
    @extend %set-block;
    color: $tapa;
  }

  .file-actions {
    @extend %set-text-center;
  }

  .kvsortable-ghost {
    background: $mystic;
    border: multiply($border, 2) solid $perano;
    opacity: .6;
  }

  .file-preview .table {
    margin: 0;
  }

  .file-error-message ul {
    padding: $pad 0 0 multiply($pad, 4);
  }
}

.explorer-frame {
  .file-preview-text {
    border: $border solid $alto;
    color: $boston-blue;
    display: inline-block;
    font-family: $font-0, $font-1, $font-2, $font-3, $font-4;
    outline: none;
    padding: multiply($pad, 1.6);
    resize: none;
  }

  .file-preview-html {
    border: $border solid $alto;
    display: inline-block;
    overflow: auto;
    padding: multiply($pad, 1.6);
  }

  .file-preview-other {
    @extend %set-text-center;
  }

  .file-other-icon {
    font-size: 2.6em;
  }
}

@media only screen and(max-width: $tablet) {
  //@extend-elements
  %set-block-full {
    display: block;
    width: 100%;
  }

  .theme-explorer-fa {
    .table {
      @extend %set-block-full;
      border: 0;

      tbody {
        @extend %set-block-full;
      }

      tr {
        @extend %set-block-full;
        margin-top: $pad;
      }

      tr:first-child {
        margin-top: 0;
      }

      td {
        @extend %set-block-full;
        text-align: center;
      }

      .kv-file-content {
        border-bottom: 0;
        margin: 0;
        padding: multiply($pad, .8);
      }

      .file-preview-image {
        font-size: multiply($pad, 4);
        max-width: 100%;
      }
    }

    .file-details-cell {
      border-bottom: 0;
      border-top: 0;
      margin: 0;
      padding-top: 0;
    }

    .file-actions-cell {
      border-top: 0;
      padding-bottom: multiply($pad, .8);
    }

    .explorer-frame .explorer-caption {
      left: 0;
      margin: auto;
      overflow: hidden;
      right: 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.file-zoom-dialog .explorer-frame .file-other-icon {
  //noinspection CssOverwrittenProperties
  // font-size: 22em;
  //noinspection CssOverwrittenProperties
  font-size: 50vmin;
}