ehmorris/cardslap

.decks {
  @extend %cards-bincards-decks-shared;

  li {
    @extend %animation-fade-in;
    overflow: visible;
    margin-right: 25px;

    $t: 0.1s;
    $delay: $t;
    @for $child from 1 through 20 {
      &:nth-child(#{$child}) {
        @include animation-delay($delay);
      }
      $delay: $delay + $t;
    }

    &.create-deck {
      background: $red;
      border: 1px solid #fff;
      @include box-sizing(border-box);
      color: #fff;
      padding: 1em;
      position: relative;
      text-align: center;

      &+ li {
        clear: both;
      }

      textarea {
        background: transparent;
        border: 0;
        @include box-sizing(border-box);
        color: #fff;
        margin: 0;
        padding: 0;
        @include position(absolute, 1em 1em 1em 1em);
        text-align: left;

        @include placeholder {
          color: rgba(255, 255, 255, .8);
        }

        @include media($smallandtouch) {
          height: 3em;
        }
      }

      input[type=submit] {
        margin-left: -60px;
        @include position(absolute, 0 0 -12px 50%);
        width: 120px;
      }
    }

    > a {
      background: $gray;
      border: 1px solid #fff;
      bottom: 0;
      @include box-sizing(border-box);
      color: #fff;
      left: 0;
      padding: 1em;
      position: absolute;
      right: 0;
      top: 0;
    }

    // stack effect
    &.deck::after, &.shared::after {
      background: lighten($gray, 20%);
      bottom: 0;
      content: "";
      display: block;
      height: $card-size;
      margin-bottom: 4px;
      margin-right: -3px;
      position: absolute;
      right: 0;
      width: $card-size;
      z-index: -1;
    }

    &.shared {
      > a::after {
        content: " (shared)";
      }
    }

    @include media($smallandtouch) {
      float: none;
      height: auto;
      width: 100%;

      > a {
        border: 0;
        display: block;
        position: static;
      }

      &.deck::after, &.shared::after {
        display: none;
      }
    }
  }
}

#bin {
  border: .15em dashed lighten($gray, 20%);
  @include box-sizing(border-box);
  clear: both;
  display: inline-block;
  margin-top: 1em;
  min-height: $card-size / 2;
  min-width: $card-size;
  padding: 1em 0 0 1em;
  @include transition;

  &.over {
    border: .15em solid yellow;
  }

  h2 {
    color: lighten($gray, 10%);
    font-size: 100%;
    font-weight: normal;
    margin-bottom: 1em;
  }

  li {
    height: $card-size / 1.5 !important;
    margin-right: 1em;
    min-height: auto !important;
    min-width: auto !important;
    width: $card-size / 1.5 !important;
  }

  .reorder-target {
    display: none;
  }

  @include media($smallandtouch) {
    border: 0;
    opacity: .6;
    padding: 0;
    width: 100%;

    li {
      height: 132px !important;
      margin-right: 8px;
      width: 132px !important;
    }
  }
}

.exportshare {
  margin: 0;
  padding: 2em 0 0 0;
  position: relative;

  .shares-container {
    bottom: 2.5em;
  }

  > a {
    border: 1px solid #999;
    border-radius: 3px;
    color: #666;
    display: inline-block;
    margin-right: .25em;
    outline: none;
    padding: .75em 1em;
    text-decoration: none;

    &:hover {
      color: #333;
      border-color: #333;
    }

    &:active {
      background: #ccc;
      border-color: #999;
      color: #666;
    }
  }
}