//
// Styles for Loft Character CMS plugin, this should be included in
// admin.scss (default)
//

@import "chr/form/input-loft-image";

// MIXINS

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

@mixin iconLabel($title) {
  &:before {
    display: block; margin-top: 2.6em;
    content: $title; color: $contrastColor;
    font-size: 1.5em; font-weight: 300; letter-spacing: 8px;
    text-align: center; text-transform: uppercase;
  }
}


// ASSET TYPE ICONS

.module.assets .list:first-child .items {
  .item {
    .item-title { margin-left: 2.05em; }
    &:before    { @include absolutePosition(inherit inherit inherit 1em); content: ''; display: block; }
  }

  .item {
    &:before         {    @include iconBase(32px 112px, 16px, 16px); }
    &.active:before  {    background-position: 16px   0px; }
  }
  .item:nth-child(2) {
    &:before            { background-position:  0px -16px; }
    &.active { &:before { background-position: 16px -16px; } }
  }
  .item:nth-child(3) {
    &:before            { background-position:  0px -32px; }
    &.active { &:before { background-position: 16px -32px; } }
  }
  .item:nth-child(4) {
    &:before            { background-position:  0px -48px; }
    &.active { &:before { background-position: 16px -48px; } }
  }
  .item:nth-child(5) {
    &:before            { background-position:  0px -64px; }
    &.active { &:before { background-position: 16px -64px; } }
  }
  .item:nth-child(6) {
    &:before            { background-position:  0px -80px; }
    &.active { &:before { background-position: 16px -80px; } }
  }
  .item:nth-child(7) {
    &:before            { background-position:  0px -96px; }
    &.active { &:before { background-position: 16px -96px; } }
  }
}


// LIST MODE

.module.assets .list:not(:first-child) .items .item.asset {
  padding-left: 6.25em; // 100px;

  // checkbox
  .asset-checkbox {
    @include absolutePosition(1.3em inherit inherit 1em); z-index: 1;
    input { @include absolutePosition(0px inherit inherit 0px); }
  }

  // type icon
  .asset-icon {
    @include iconBase(64px 224px, 32px, 32px);
    @include absolutePosition(12px inherit inherit 3.05em);
  }

  // image thumbnail
  &.asset-image .asset-icon {
    @include absolutePosition(8px inherit inherit 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 absolutePosition(7px .5em inherit 94px);
    input { width: 100%; padding: .1em .3em .3em .3em; @include noFocus();
            border: 1px solid $stableColor; box-shadow: 0 0 10px $lightColor; border-radius: 3px; }
  }
  &.edit-name .asset-name { display: block; }
}


// LIST-GRID MODE SWITCHER

.assets-switch-mode { display: none; }


// GROUP ACTIONS

.assets-group-actions {
  @include absolutePosition(0 0 0 0); background: $white;
  .accept   { @include headerButton($positiveColor);  float: right; margin-right: 1em; }
  .delete   { @include headerButton($assertiveColor); float: right; margin-right: 1em; }
  .unselect { @include headerButton($stableColor);    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

.asset-upload {
  @include absolutePosition(0 -40px inherit inherit);
  @extend .icon-plus; @include noFocus;
  cursor: pointer; padding-left: 80px;
}

.list header .asset-upload + .search { @include absolutePosition(0 40px inherit inherit); }
.list.list-search header .asset-upload + .search { @include absolutePosition(0 0 inherit 0); }
.module.assets.assets-uploading .list:not(:first-child) header .spinner { display: inline-block; }


// MODAL MODE

.module.assets {
  .modal-close {
    display: none;
    @include headerButton();
    @include absolutePosition(null null null 1em );
  }
  &.module-modal {
    @include absolutePosition(.5em .5em 0em .5em); z-index: 1100;

    &:after { display: none; }

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

    .modal-close { display: inline; }
    .list:first-child .back { display: none }
  }
}


/* TABLET LAYOUT */

@media #{ $tablet } {
  .module.assets .list:not(:first-child) .items { font-size: 1em; }

  // ITEM
  .module.assets .list:not(:first-child) .items .item.asset {
    padding-top: 19px; padding-bottom: 19px;
    .item-title {
      display: inline; cursor: pointer;
      &:hover { color: $positiveColor; text-decoration: underline; }
    }
    .item-subtitle { @include absolutePosition(1.55em 1em inherit inherit); }
    .asset-name { top: 16px; }
  }

  // MODAL MODE
  .module.assets.module-modal { @include absolutePosition(1.5em 1.5em 0em 1.5em) }


  // GRID MODE
  .assets-switch-mode {
    @include absolutePosition(inherit inherit inherit 1em);
    display: inline;
    font-size: .9em;
    &:before { content: 'Grid'; color: $lightColor; margin-right: .25em; }
    &:after  { content: 'List'; color: $stableColor; }
  }
  .module.assets.grid-mode .assets-switch-mode {
    &:before { color: $stableColor; }
    &:after  { color: $lightColor;  }
  }

  .module.assets.grid-mode {
    .list:not(:first-child) .items {
      padding: .25em .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 noBorder(); border: 1px solid $contrastColor; border-radius: 4px;

        // checkbox: position + decoration
        .asset-checkbox {
          top: 10px; left: 10px; width: 24px; height: 24px; background: $white;
          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 absolutePosition(10px inherit inherit 10px);
          width: 200px; height: 150px; background: $white; border-radius: 0;
          &:after { @include absolutePosition(0px 0px 0px 0px); 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 iconLabel('Text');    }
      .asset-archive .asset-icon { @include iconLabel('Archive'); }
      .asset-audio   .asset-icon { @include iconLabel('Audio');   }
      .asset-video   .asset-icon { @include iconLabel('Video');   }
      .asset-other   .asset-icon { @include iconLabel('File');    }
    }
  }
}