/** ==============================
    Layout Aspect Ratios (MEDIA)
    ============================== **/

/* defaults */
$width: 200px;

@mixin crossed($r, $g, $b) {
  background: 
     linear-gradient(to top left,
         rgba($r,$g,$b,0) 0%,
         rgba($r,$g,$b,0) calc(50% - 0.8px),
         rgba($r,$g,$b,1) 50%,
         rgba($r,$g,$b,0) calc(50% + 0.8px),
         rgba($r,$g,$b,0) 100%),
     linear-gradient(to top right,
         rgba($r,$g,$b,0) 0%,
         rgba($r,$g,$b,0) calc(50% - 0.8px),
         rgba($r,$g,$b,1) 50%,
         rgba($r,$g,$b,0) calc(50% + 0.8px),
         rgba($r,$g,$b,0) 100%) !important;
}

@mixin layout($aspect, $width, $scale, $pad, $label:14px) {
  width:    $scale * $width; 
  height:   $scale * $width / $aspect + $label; 
  padding:  $pad;
//  padding-bottom: $label;
//  margin-bottom: $label;
  grid-gap: $pad;
  .panelgroup {
    grid-gap: $pad;
  }
}

@mixin sizelist($aspect, $width) {
  &.layout,
  & .layout {
    @include layout($aspect, $width, 1, 4px);
    /* * padding-bottom: 20px; * */
  }
  &.default,
  & .default,
  .default & {
    &.layout,
    & .layout {
      @include layout($aspect, $width, 1, 4px);
      /* * padding-bottom: 20px; * */
    }
  }
  &.small,
  & .small,
  .small & {
    &.layout,
    & .layout {
      @include layout($aspect, $width, 1/2, 3px);
      /* * padding-bottom: 20px; * */
    }
  }
  &.thumb,
  & .thumb,
  .thumb & {
    &.layout,
    & .layout {
      @include layout($aspect, $width, 32/100, 2px);
      /* * padding-bottom: 20px; * */
      .label {
        position: absolute;
      }
    }
  }
  &.mini,
  & .mini,
  .mini & {
    &.layout,
    & .layout {
      @include layout($aspect, $width, 16/100, 1px, 2px);
      .label {
        position: absolute;
        bottom: -14px !important;
      }
      &:hover .label {
        bottom: 0px !important;
        visibility: initial;
        overflow: visible;
      }
      .panel {
        color: transparent; /* hide panel text */
      }
    }
  }
  &.micro,
  & .micro,
  .micro & {
    &.layout,
    & .layout {
      @include layout($aspect, $width, 12/100, 1px, 1px);
      background: #fff;
      border: 1px solid #999;
      .label {
        visibility: hidden;
        position: absolute;
        bottom: -14px !important;
      }
      &:hover .label {
        visibility: initial;
        overflow: visible;
      }
      .panel {
        border: 0px solid #999;
        background: #ccc;
        padding: 0px;
        color: transparent;  /* hide panel text */
      }
    }
  }
  &.micro2,
  & .micro2,
  .micro3 & {
    &.layout,
    & .layout {
      @include layout($aspect, $width, 12/100, 0px, 0px);
      background: #fff;
      border: 0px solid #999;
      .label {
        visibility: hidden;
        position: absolute;
        bottom: -14px !important;
      }
      &:hover .label {
        visibility: initial;
        overflow: visible;
      }
      .panel {
        border: 1px solid #999;
        background: #fff;
        padding: 0px;
        color: transparent;  /* hide panel text */
      }
    }
  }
  &.micro3,
  & .micro3,
  .micro3 & {
    &.layout,
    & .layout {
      @include layout($aspect, $width, 12/100, 1px, 1px);
      border: 0px solid #f00;
    }
  }
}

/** mark empty panels with an x **/
//.panel {
//  &.x {
//    @include crossed(230,230,230);
//  }
//}


/** default
    ============================== **/

div {
  @include sizelist(1.0/1.0, $width);
}

/** comicbooks
    ============================== **/

.comicbook {
  $width: 200px; // 280px
  &-us { /* 11" x 17" */ 
    @include sizelist(11.0/17.0, $width);  
  }
  &-short { /* 11" x 15" aspect */
    @include sizelist(11.0/15.0, $width);
    &.layout,
    & .layout {
      padding: 20px 15px 20px 15px;
    }  
  }
}

/** comicstrips
    ============================== **/

.comicstrip {
  $width: 300px; // 280px
  &-daily { /* 14" x 20" */ 
    @include sizelist(14.0/4.0, $width);
  }
  &-sunday-full {
    @include sizelist(14.0/20.0, $width);
  }
  &-sunday-half {
    @include sizelist(14.0/10.0, $width);
  }
  &-sunday-third {
    @include sizelist(14.0/6.7, $width);  
  }
  &-sunday-quarter {
    @include sizelist(14.0/5.0, $width);  
  }
  &-linear {
    @include sizelist(14.0/2.5, $width);
  }
}
