/**
 * card interactive
 */

// variant

a.card-default, label.card-default {
  &:hover, &.hover {
    color: @text;
    .card-design {
      border-color: @shade-100;
      background: @shade-100;
    }
  }
  &:active, &.active {
    color: @text;
    .card-design {
      border-color: @shade-200;
      background: @shade-200;
    }
  }
}

a.card-primary, label.card-primary {
  &:hover, &.hover {
    color: @text-inverse;
    .card-design {
      border-color: @accent;
      background: @accent;
    }
  }
  &:active, &.active {
    color: @text-inverse;
    .card-design {
      border-color: @accent-dark;
      background: @accent-dark;
    }
  }
}

// animation

a.card, label.card {
  .card-design {
    transition: all @time-small @ease-out;
  }
  &:hover, &.hover {
    .card-design {
      transition: all @time-small @ease-in;
    }
  }
  &:active, &.active {
    .card-design {
      transition: all @time-small @ease-in;
    }
  }
}