@import "inputs/loft-image";

// MIXINS
@mixin loft-icon-base($bgSize, $width, $height) {
  display: block; background-size: $bgSize; width: $width; height: $height;
  background-image: image-url("loft/library@3x.png");
}

@mixin loft-icon-label($title) {
  &:before {
    display: block; margin-top: 2.6em;
    content: $title; color: rgba($base-font-color, .2);
    font-size: 1.5em; font-weight: 300; letter-spacing: 8px;
    text-align: center; text-transform: uppercase;
  }
}

// LIST MODE
.list.loft .items .item.asset {
  padding-left: 6.25em;

  // checkbox
  .asset-checkbox {
    @include position(absolute, 1.3em null null 1em); z-index: 1;
    input { @include position(absolute, 0px null null 0px); }
  }

  // type icon
  .asset-icon {
    @include loft-icon-base(64px 224px, 32px, 32px);
    @include position(absolute, 12px null null 3.05em);
  }

  // image thumbnail
  &.asset-image .asset-icon {
    @include position(absolute, 8px null null 2.8em);
    overflow: hidden; width: 40px; height: 40px; border-radius: 20px;
    img { height: 100%; }
  }

  &.asset-image   .asset-icon { background-position:  0px  -32px; }
  &.asset-text    .asset-icon { background-position:  0px  -64px; }
  &.asset-archive .asset-icon { background-position:  0px  -96px; }
  &.asset-audio   .asset-icon { background-position:  0px -128px; }
  &.asset-video   .asset-icon { background-position:  0px -160px; }
  &.asset-other   .asset-icon { background-position:  0px -192px; }

  .asset-thumnail-small  { display: block; }
  .asset-thumnail-medium { display: none;  }

  // name
  .item-title { cursor: pointer; }
  .asset-name {
    display: none; z-index: 1;
    @include position(absolute, 7px .5em null 94px);
    input { width: 100%; padding: .1em .3em .3em .3em; @include no-focus-outline;
            border: 1px solid lighten($base-font-color, 35%); box-shadow: 0 0 10px lighten($base-font-color, 50%); border-radius: 3px; }
  }
  &.edit-name .asset-name { display: block; }
}

// LIST-GRID MODE SWITCHER
.assets-switch-mode { display: none; }

// GROUP ACTIONS
.assets-group-actions {
  @include position(absolute, 0 0 0 0); background: white;
  .accept   { color: $positive-color;  float: right; margin-right: 1em; }
  .delete   { color: $assertive-color; float: right; margin-right: 1em; }
  .unselect { color: lighten($base-font-color, 35%); float: left; margin-left: 1em; }
}

.assets-group-actions .accept { display: none; }
.module-modal .assets-group-actions .accept { display: inline; }
.module-modal .assets-group-actions .delete { display: none;   }

// UPLOAD BUTTON
.list.loft .header:before {
  @include position(absolute, 0px 0px null null);
  @include header-icon-base;
  display: block;
  content: "\f067";
  font-family: "FontAwesome";
  color: $positive-color;
}

.asset-upload {
  @include position(absolute, 0px 0px null null);
  @include no-focus-outline;
  line-height: 40px;
  width: 40px;
  padding-left: 40px;
  cursor: pointer;
}

.list header .asset-upload + .search { @include position(absolute, 0 40px null null); }
.list.list-search header .asset-upload + .search { @include position(absolute, 0 0 null 0); }
.loft.assets-uploading .list header .spinner { visibility: visible; }

// MODAL MODE
.loft {
  .modal-close { display: none; }
  &.module-modal {
    @include position(absolute, 0 .5em 0 .5em);
    z-index: 1100;

    &:after { display: none; }

    &:before {
      @include position(fixed, 0px 0px 0px 0px);
      z-index: 0;
      content: '';
      display: block;
      background: rgba(0, 0, 0, 0.25);
    }

    .modal-close {
      @include header-icon-base;
      @include position(absolute, null null null 0);
      display: block;
      color: $secondary-font-color;

      &:hover {
        color: $base-font-color;
      }
    }

    .header {
      top: 0;
      left: 0.5em;
      right: 0.5em;
      width: auto;
    }

    .back {
      display: none;
    }
  }
}

/* Tablet ----------------------------------------------------------------- */
@media #{$tablet} {
  // LAYOUT
  .list.loft {
    width: initial;
    background-color: $bg-color;

    .header {
      background-color: $bg-color;
    }

    .item {
      background-color: $white-color;
    }
  }

  // ITEMS
  .list.loft .items {
    font-size: 1em;
    padding-top: 1.5em;
  }

  .list.loft .item {
    @include no-bottom-border;
    background-color: $white-color;
    box-shadow: 0 0 1px rgba(0,0,0,0.15);
    margin: 0 auto;
    max-width: 44em;
  }

  .list.loft .items .item.asset {
    padding-top: 19px; padding-bottom: 19px;
    .item-title {
      display: inline; cursor: pointer;
      &:hover { color: $positive-color; text-decoration: underline; }
    }
    .item-subtitle { @include position(absolute, 1.55em 1em null null); }
    .asset-name { top: 16px; }
  }

  // MODAL MODE
  .loft.module-modal { @include position(absolute, 1.5em 1.5em 0em 1.5em) }
  .loft.module-modal .header { top: 0; left: 0; right: 0; width: auto; }

  // GRID MODE
  .assets-switch-mode {
    @include position(absolute, null 5.5em null null);
    display: inline-block;
    line-height: 2.5;
    i:first-child { color: $border-color; }
    i:last-child { color: rgba($base-font-color, 0.4); }
  }

  .loft.grid-mode .assets-switch-mode {
    i:first-child { color: rgba($base-font-color, 0.4); }
    i:last-child { color: $border-color; }
  }

  .loft.grid-mode .list .items {
    padding: 1em .25em 5em .75em;

    .item.asset { margin: 0 .75em 1.5em; float: left; display: inline-block; }

    .item.asset {
      padding-left: 1em; width: 222px; height: 222px;
      @include no-bottom-border;
      box-shadow: 0 0 1px rgba(0,0,0,0.2);
      border-radius: 4px;

      // checkbox: position + decoration
      .asset-checkbox {
        top: 10px;
        left: 10px;
        width: 24px;
        height: 24px;
        background: $white-color;
        box-shadow: 0 1px 0 rgba(0,0,0,0.05),1px 0 0 rgba(0,0,0,0.05);
        border-bottom-right-radius: 4px;
      }

      // thumbnail
      .asset-icon {
        @include position(absolute, 10px null null 10px);
        width: 200px; height: 150px; background: white; border-radius: 0;
        &:after {
          @include position(absolute, 0 0 0 0);
          box-shadow: 0 0 1px rgba(0,0,0,0.2) inset;
          content: '';
          display: block;
        }
      }

      .asset-thumbnail-small { display: none; }
      .asset-thumbnail-medium { display: block; }

      // name & subtitle
      .item-title { display: block; margin-top: 9.45em; }
      .item-subtitle { display: block; position: initial; margin-top: .3em; }
      &.edit-name .asset-name { top: inherit; bottom: 27px; left: 10px; right: 10px; }
    }

    // asset type labels
    .asset-text .asset-icon { @include loft-icon-label('Text'); }
    .asset-archive .asset-icon { @include loft-icon-label('Archive'); }
    .asset-audio .asset-icon { @include loft-icon-label('Audio'); }
    .asset-video .asset-icon { @include loft-icon-label('Video'); }
    .asset-other .asset-icon { @include loft-icon-label('File'); }
  }
}