ehmorris/cardslap

.cards, #bin {
  @extend %animation-slide-entry;
  @extend %cards-bincards-decks-shared;
  @include clearfix;
  overflow: visible;

  &.shared li {
    .front:hover .actions {
      display: none;
    }
  }

  li {
    overflow: visible;

    &[draggable=true] {
      min-height: $card-size;
      min-width: $card-size;
    }

    .front, .back {
      @include backface-visibility(hidden);
      background: $gray;
      bottom: 0;
      color: #fff;
      left: 0;
      overflow: hidden;
      padding: 1em;
      position: absolute;
      right: 0;
      top: 0;
      @include transform-style(preserve-3d);
      @include transition(all .25s ease-in-out);

      pre.text {
        font: inherit;
        line-height: inherit;
        margin: inherit;
        white-space: normal;
      }

      &.image {
        padding: 0;

        img {
          @include transition;
          width: 100%;
        }
      }

      .actions {
        display: none;
      }

      &:hover .actions {
        display: block;
      }

      @include media($smallandtouch) {
        &:hover .actions {
          display: none;
        }
      }
    }

    .front {
      @include transform(rotate3d(45,45,0,0deg));
      z-index: 1;
    }

    .back {
      background: lighten($gray, 40%);
      color: #000;
      @include transform(rotate3d(45,45,0,-180deg));
      z-index: 0;
    }

    &.flip {
      .front {
        @include transform(rotate3d(45,45,0,180deg));
      }

      .back {
        z-index: 2;
        @include transform(rotate3d(45,45,0,0deg));
      }
    }

    .ui-resizable-handle {
      position: absolute;

      &.ui-resizable-e {
        bottom: 0;
        cursor: e-resize;
        right: 0;
        top: 0;
        width: 20px;
      }

      &.ui-resizable-s {
        bottom: 0;
        cursor: s-resize;
        height: 20px;
        left: 0;
        right: 0;
      }

      &.ui-resizable-se {
        bottom: 0;
        cursor: se-resize;
        height: 20px;
        right: 0;
        width: 20px;
      }
    }

    @include media($smallandtouch) {
      height: 124px !important;
      margin-bottom: 8px;
      margin-right: 8px !important;
      min-height: 124px !important;
      min-width: 124px !important;
      width: 124px !important;
    }
  }

  li.reorder-target {
    margin: 0 0 25px 0;
    max-width: 25px;
    min-height: $card-size;
    min-width: 25px;
    @include transition;

    &.last {
      display: none;

      &:first-child {
        display: block;
      }
    }

    &.over {
      width: 45px;
      max-width: 45px;
    }

    @include media($smallandtouch) {
      display: none;
    }
  }

  li.card-button {
    margin-right: 25px;

    &:last-child {
      margin-right: 0;
    }

    a {
      background: $red;
      bottom: 0;
      color: #fff;
      display: block;
      left: 0;
      padding: 1em;
      position: absolute;
      right: 0;
      top: 0;

      &:active {
        background: darken($red, 10%);
      }
    }
  }
}

.card-form {
  .entries {
    float: left;
    height: $card-size;
    position: relative;

    textarea {
      background: $gray;
      border: none;
      @include box-sizing(border-box);
      color: #fff;
      height: $card-size / 2;
      margin: 0;
      padding: 1em;
      @include transition;
      width: $card-size;

      &:focus {
        background: darken($gray, 10%);
        outline: none;
      }

      &#card_back {
        background: lighten($gray, 40%);
        color: #000;

        &:focus {
          height: $card-size / 1.5;
          position: absolute;
          bottom: 0;
        }
      }

      &#card_front:focus {
        height: $card-size / 1.5;

        &+textarea {
          height: $card-size / 3;
        }
      }

      @include media($smallandtouch) {
        border-radius: 0;
        height: 90px;
        margin: 0;
        width: 100%;

        &#card_back {
          margin-bottom: 1em;
        }
      }
    }
  }

  input.edit-card-button {
    margin-left: -35px;
    @include position(absolute, 0 0 -12px 50%);
    width: 70px;
  }

  input.new-card-button {
    background: $red;
    border-radius: 0;
    color: #fff;
    float: left;
    height: $card-size;
    margin-right: 25px;
    padding: 1em;
    text-align: left;
    text-decoration: underline;
    @include transition(0s);
    vertical-align: top;
    -webkit-box-align: start;
    width: $card-size;

    &:focus, &:active {
      background: darken($red, 10%);
    }
  }
}