/* Newly added element */

@-webkit-keyframes new {
  1% {
    box-shadow: 0 0px 3px rgba($blue, 0.2);
    border-color: $blue;
  }
}

@-moz-keyframes new {
  1% {
    box-shadow: 0 0px 3px rgba($blue, 0.2);
    border-color: $blue;
  }
}

@-ms-keyframes new {
  1% {
    box-shadow: 0 0px 3px rgba($blue, 0.2);
    border-color: $blue;
  }
}

@-o-keyframes new {
  1% {
    box-shadow: 0 0px 3px rgba($blue, 0.2);
    border-color: $blue;
  }
}

@keyframes new {
  1% {
    box-shadow: 0 0px 3px rgba($blue, 0.2);
    border-color: $blue;
  }
}

@mixin new($delay) {
  -webkit-animation: new $delay linear;
  -moz-animation: new $delay linear;
  -ms-animation: new $delay linear;
  -o-animation: new  $delay linear;
  animation: new $delay linear;
}

.empty {
  background: $light;
  border-radius: $radius;
  padding: 1.5*$gutter/2;
  text-align: center;
}

.list {
  list-style: none;
  margin: 0;
  margin-bottom: $gutter;
  padding: 0;
  .item,
  > .header,
  > .footer {
    border: 1px solid $line;
    border-bottom-width: 0;
    padding: 0;
    &.new {
      @include new(4s);
    }
    &.collapsible {
      @include transition-property(border);
      @include transition-duration(0.2s);
      &:hover {
        border-color: shade($line, 15%);
        + .item {
          border-top-color: shade($line, 15%);
        }
      }
      &.active {
        .body {
          display: block;
        }
      }
    }
  }
  > .item:first-child,
  > .header {
    border-radius: $radius $radius 0 0;
  }
  > .item:last-child,
  > .footer {
    border-radius: 0 0 $radius $radius;
    border-bottom-width: 1px;
  }
}