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

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

// MIXINS

@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;
  }
}

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

// ASSET TYPE ICONS

.loft .list:first-child .items {
  .item {
    .item-title { margin-left: 2.05em; }
    &:before    { @include position(absolute, null null null 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

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

  // 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 iconBase(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 $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 position(absolute, 0 0 0 0); background: $white;
  .accept   { @include header-button($positiveColor);  float: right; margin-right: 1em; }
  .delete   { @include header-button($assertiveColor); float: right; margin-right: 1em; }
  .unselect { @include header-button($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 position(absolute, 0 -40px null null);
  @extend .icon-plus; @include no-focus-outline;
  cursor: pointer; padding-left: 80px;
}

.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:not(:first-child) header .spinner { display: inline-block; }


// MODAL MODE

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

    &:after { @include hide(); }

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

    .modal-close { @include header-button(); @include position(absolute, null null null 1em ); }
    .header { top: 0; left: .5em; right: .5em; width: auto; }

    .list:first-child .back { display: none }
  }
}


/* Tablet ------------------------------------------------------------------ */
@media #{$tablet} {
  // ITEMS
  .loft .list:not(:first-child) .items { font-size: 1em; }
  .loft .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 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 null null 1em);
    display: inline; font-size: .9em; line-height: 2.9; left: 3em;
    &:before { content: 'Grid'; color: $lightColor; margin-right: .25em; }
    &:after  { content: 'List'; color: $stableColor; }
  }
  .loft.grid-mode .assets-switch-mode {
    &:before { color: $stableColor; }
    &:after  { color: $lightColor;  }
  }

  .loft.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 no-bottom-border; 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 position(absolute, 10px null null 10px);
          width: 200px; height: 150px; background: $white; border-radius: 0;
          &:after { @include position(absolute, 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');    }
    }
  }
}


/* Desktop ----------------------------------------------------------------- */
@media #{$desktop} {
  // BACK
  .loft .list:not(:first-child) .back { @include hide; }

  // GRID MODE
  .assets-switch-mode { left: 1em; }
}