@import "mixins/all";

.design-wrapper {
  padding: 20px;
}

.design-h1,
.design-h2,
.design-h3 {
  margin-bottom: lines(0.5);
}

.design-h1 {
  @include huge-type;
}

.design-h2 {
  @include larger-type;
  border-bottom: 1px solid #CCC;
}

.design-h3 {
  @include big-type;
}

.design-section {
  margin-bottom: lines(1);
}

.design-component {
  border: 1px solid #CCC;
  @include border-radius(5px);
}

.design-example {
  border-bottom: 1px solid #CCC;
  padding: lines(0.5);
  @include clearfix;
}

.design-code {
  background-color: #FCFCFC;
  padding: lines(0.5);
  @include small-type;
  @include border-bottom-radius(5px);
  overflow-x: scroll;
}

.design-small-type {
  @include small-type;
}
.design-normal-type {
  @include normal-type;
}
.design-big-type {
  @include big-type;
}
.design-large-type {
  @include large-type;
}
.design-larger-type {
  @include larger-type;
}
.design-huge-type {
  @include huge-type;
}
.design-mega-type {
  @include mega-type;
}
.design-giga-type {
  @include giga-type;
}

.design-block-background-color {
  background-color: $highlight;
  background-color: rgba(0, 0, 0, 0.1);
}

.design-block-background {
  min-height: lines(2);
  @extend .design-block-background-color;
}

.design-block-margin {
  margin-bottom: lines(0.5);
}

.design-block {
  @extend .design-block-background;
  @extend .design-block-margin;
  line-height: lines(2);
  text-align: center;
}

@mixin design-mq-active {
  background-color: #CAEBCC;
  color: darken(#CAEBCC, 40%);
}

.design-mq-tiny-mobile {
  @extend .design-block;
  @include media(tiny-mobile) { @include design-mq-active; }
}
.design-mq-mobile {
  @extend .design-block;
  @include media(mobile) { @include design-mq-active; }
}
.design-mq-large-mobile {
  @extend .design-block;
  @include media(large-mobile) { @include design-mq-active; }
}
.design-mq-small-tablet {
  @extend .design-block;
  @include media(small-tablet) { @include design-mq-active; }
}
.design-mq-tablet {
  @extend .design-block;
  @include media(tablet) { @include design-mq-active; }
}
.design-mq-small-desktop {
  @extend .design-block;
  @include media(small-desktop) { @include design-mq-active; }
}
.design-mq-mid-desktop {
  @extend .design-block;
  @include media(mid-desktop) { @include design-mq-active; }
}
.design-mq-desktop {
  @extend .design-block;
  @include media(desktop) { @include design-mq-active; }
}

.col-content {
  @extend .design-block-background;
}

@include create-fluid-thumbnail-grid(design, 1, 1, 2, 2, 3, 3, 4, 5);

.design-fluid-thumbnail-grid-item-content {
  @extend .design-block-background;
  width: 100%;
  text-align: center;
  width: 100%;
}

.design-fluid-thumbnail-grid-item-fixed-height {
  @extend .design-fluid-thumbnail-grid-item-content;
  height: 140px;
  line-height: 140px;
}

.design-fluid-thumbnail-grid-item-3x2 {
  @extend .design-fluid-thumbnail-grid-item-content;
}

.design-max-width-300 {
  width: 25%;
  max-width: 300px;
  float: left;
  padding-right: lines(0.5);
  margin-bottom: lines(0.5);
}

.design-aspect-ratio {
  position: relative;
  @include block-with-aspect-ratio(3/2);
}

.design-aspect-ratio-content {
  @include absolutely-all;
  @extend .design-block-background-color;
  @include vertical-centering-container;
}

.design-vertical-centering-content-too-wide {
  @include vertical-centering-content;
}

.design-vertical-centering-content-too-narrow {
  @include vertical-centering-content;
  height: 100%;
}

.design-image-too-wide {
  @include image-too-wide;
}

.design-image-too-narrow {
  @include image-too-narrow;
}

.design-sort-arrow {
  margin: 0px 10px;
  cursor: pointer;
}

.design-sort-arrows {
  margin: 0px 10px;
  float: right;
}

.design-sort-title {
  margin: 0px 10px;
  &.sub {
    margin: 0px 30px;
  }
  float: left;
}

.thumbnail-stripe {
  width: 310px;
  overflow: hidden;
  height: 60px;
  outline: 1px solid red;
  position: relative;
}

.thumbnail-stripe-container {
  width: 10 * 60px;
}

.thumbnail-stripe-item {
  width: 60px;
  height: 60px;
  background-color: $highlight;
  border: 6px solid white;
  float: left;

  &.selected {
    background-color: darken(#CAEBCC, 20%);
  }
}